## JavaSript / Soapi.JS (V2)

---

Using Soapi.JS (V2)

<sub>Yes, this is a teaser - v2 will be released before the weekend.</sub>

---

    var apiKey = "my-foo-bar-fu-is-strong";
    var ctx = new Soapi.ApiContext(apiKey);
    ctx.initialize(function() {
        // All available sites have been loaded from stackauth
        // to track loading of stats.
        var counter = 0;

        // Now we load the .stats property of the Site object.

        for (var i = 0; i < ctx.sites.length; i++) {
            var site = ctx.sites[i];
            if (!site.stats) {
                counter++;
                site.get_stats(function(data, site_as_context) {
                    // Keep the user informed
                    document.getElementById("output")
                      .innerHTML = "loaded stats for "
                      + site_as_context.name;
                    /* Is it */soupYet()/*?*/;
                },
                function(error, site_as_context) { // Site sent as userContext
                    // Keep the user informed
                    document.getElementById("output")
                      .innerHTML = "failed to loaded stats for "
                      + site_as_context.name;

                    // The request failed but we must decrement the counter.
                    /* Is it */soupYet()/*?*/;
                }, site /* As context */);
            };
        };

        // That's all the code it takes to get all sites from stackauth and
        // the statistics for each. More than half of it is exception handling
        // and progress updates.

        // The rest is the code to render the /sites and /stats data to HTML.
        function soupYet(/*?*/) {
            // Check to see if all sites have been loaded.
            if (--counter == 0) {
                // Dump all to table
                var output = "<table cellpadding='0' cellspacing='0' style='border:solid 1px silver;'> \
                    <tr class='header'><td>Site</td><td>State</td><td>Tags</td><td>Logo</td><td>API</td> \
                    <td>v.p.d</td><td>users</td><td>questions</td><td>q.p.m.</td><td>accepted</td> \
                    <td>unanswered</td><td>answers</td><td>a.p.m</td><td>comments</td><td>votes</td> \
                    <td>badges</td><td>b.p.m.</td></tr>";

                for (var i = 0; i < ctx.sites.length; i++) {
                    var site = Soapi.Domain.Site(ctx.sites[i]);
                    output += "<tr>"
                        + "<td><img src='" + site.icon_url + "' style='width:32px;height:32px;'/>"
                        + "<a href='" + site.site_url + "' style='color:" + site.styling.link_color
                        + ";' target='_blank' title='" + site.description.replace("'", "`") + "'>" + site.name + "</a></td>"
                        + "<td class='stats'>" + site.state + "</td>"
                        + "<td class='stats'><span style='color:" + site.styling.tag_foreground_color + ";background-color:"
                        + site.styling.tag_background_color + ";'>[tags]</span></td>"
                        + "<td class='stats'>&nbsp;<a href='" + site.logo_url + "' target='_blank'>logo</a></td>"
                        + "<td class='stats'>&nbsp;<a href='" + site.api_endpoint + "/" + site.stats.api_version.version
                        + "/help' target='_blank'>" + site.stats.api_version.version + " " + site.stats.api_version.revision + "</a></td>"
                        + "<td class='stats'>" + Math.ceil(site.stats.views_per_day) + "</td>"
                        + "<td class='stats'>" + site.stats.total_users + "</td>"
                        + "<td class='stats'>" + site.stats.total_questions + "</td>"
                        + "<td class='stats'>" + Math.ceil(site.stats.questions_per_minute) + "</td>"
                        + "<td class='stats'>" + site.stats.total_accepted + "</td>"
                        + "<td class='stats'>" + site.stats.total_unanswered + "</td>"
                        + "<td class='stats'>" + site.stats.total_answers + "</td>"
                        + "<td class='stats'>" + Math.ceil(site.stats.answers_per_minute) + "</td>"
                        + "<td class='stats'>" + site.stats.total_comments + "</td>"
                        + "<td class='stats'>" + site.stats.total_votes + "</td>"
                        + "<td class='stats'>" + site.stats.total_badges + "</td>"
                        + "<td class='stats'>" + Math.ceil(site.stats.badges_per_minute) + "</td>"
                        + "</tr>";
                };

                output += "</table>";
                document.getElementById("output").innerHTML = output;
            }
        };
    }, function(error) {
        alert(error.message);
    });


**Output:**

![Alt text][1]

  [1]: https://i.sstatic.net/TYfN1.png