Return to Revisions

JavaSript / Soapi.JS (V2)

Using Soapi.JS (V2)

_{Yes, this is a teaser - v2 will be released before the weekend.}

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: