I was trying to write a Javascript using jQuery to retrieve the repositories under my username and the organizations I own on GitHub, and then sort them by the number of watchers and so on. However, I never really make it work. The core task is just to query multiple urls and combine the raw data before sorting and formatting which I can do. I have searched online, but it seems very tricky to retrieve multiple data sets and combine them as I may not understand the scope of variables and data structures.

My Javascript is on the fiddle. Could anyone guide me to concatenate multiple queries and sort the result? You can give me some simple examples. Below is the javascript code and html part in my actual case. I have left some commented code to show the other ways I have tried.

Javascript code:

1. (function ($, undefined) { $.ajaxSetup({ cache: false }); // Put custom repo URL's in this object, keyed by repo name. var repoUrls = { }; // Put custom repo descriptions in this object, keyed by repo name. var repoDescriptions = { }; var repos = []; function repoUrl(repo) { return repoUrls[repo.name] || repo.html_url; } function repoDescription(repo) { return repoDescriptions[repo.name] || repo.description; } function addRecentlyUpdatedRepo(repo) { var $item = $("<li>"); var $name = $("<a>").attr("href", repo.html_url).text(repo.name); $item.append($("<span>").addClass("name").append($name)); var $time = $("<a>").attr("href", repo.html_url + "/commits").text(strftime("%h %e, %Y", repo.pushed_at)); $item.append($("<span>").addClass("time").append($time)); $item.append('<span class="bullet">&sdot;</span>'); var $open_issues = $("<a>").attr("href", repo.html_url + "/open_issues").text(repo.open_issues + " open_issues"); $item.append($("<span>").addClass("open_issues").append($open_issues)); var $watchers = $("<a>").attr("href", repo.html_url + "/watchers").text(repo.watchers + " watchers"); $item.append($("<span>").addClass("watchers").append($watchers)); $item.append('<span class="bullet">&sdot;</span>'); var $forks = $("<a>").attr("href", repo.html_url + "/network").text(repo.forks + " forks"); $item.append($("<span>").addClass("forks").append($forks)); $item.appendTo("#recently-updated-repos"); } function addRepo(repo) { var $item = $("<li>").addClass("repo rep " + (repo.language || '').toLowerCase()); var $link = $("<a>").attr("href", repoUrl(repo)).appendTo($item); $link.append($("<h2>").text(repo.name)); // $link.append($("<h3>").text(repo.watchers + " watchers" + " / " + repo.open_issues + " open issues")); $link.append($("<p style='line-height:1em;'>").text(repoDescription(repo))); //$link.append($("<p style='line-height:1em;'>").text("Updated " + // strftime("%h %e, %Y", repo.pushed_at))); $link.append($("<h3 style='top:23px; right:1px;'>").addClass("language").text(repo.language)); $item.appendTo("#repos"); } //var tokenkey='xxx'; function queryorgrepo(requrl){ //return $.ajax({ $.ajax({ url: requrl, async: false, dataType: 'json', //headers: 'Authorization: token '+tokenkey, success: function (result) { //temprepos = result.data; $.merge(repos, result.data); //$.merge(temprepos, result.data); //repos += result.data; //console.log(repos); } }); return repos; console.log(repos); }; var orgnames = ['CQuIC', 'JuliaCN', 'JuliaQuantum', 'ICIQ']; //var indx = 0; var orgurls = []; //var results=[]; for (var indx = 0; indx < orgnames.length; indx++){ orgurls[indx] = "https://api.github.com/orgs/"+orgnames[indx]+"/repos?per_page=100&callback=?"; }; //alert(orgurls); for (var indx = 0; indx < orgurls.length; indx++){ //repos=$.merge(repos,queryorgrepo(orgurls[indx])); queryorgrepo(orgurls[indx]); //temprepos.push(queryorgrepo(orgurls[indx])); //results.push(queryorgrepo(orgurls[indx])); console.log(repos); } //alert(tokenkey); //alert(repos); // invoke each function stored in the result array and proceed when they are all done //$.when.apply(this, repos).done(function () { // merge the arrays //for (var i = 0; i < temprepos.length; i++) { // $.merge(repos, temprepos[i]); //}; // console.log(repos); //}); //testrepos=queryorgrepo("https://api.github.com/orgs/CQuIC/repos?per_page=100&callback=?"); //alert(repos); // Add organization repos. $.ajax({ url: 'https://api.github.com/users/i2000s/repos?per_page=100&callback=?', async: false, dataType: 'json', //headers: 'Authorization: token '+tokenkey, success: function (result){ //repos += result.data; $.merge(repos,result.data); $(function () { $("#num-repos").text(repos.length); // Convert pushed_at to Date. $.each(repos, function (i, repo) { repo.pushed_at = new Date(repo.pushed_at); var weekHalfLife = 1.146 * Math.pow(10, -9); var pushDelta = (new Date) - Date.parse(repo.pushed_at); var createdDelta = (new Date) - Date.parse(repo.created_at); var weightForPush = 1; var weightForWatchers = 1.314 * Math.pow(10, 7); repo.hotness = weightForPush * Math.pow(Math.E, -1 * weekHalfLife * pushDelta); repo.hotness += weightForWatchers * repo.watchers / createdDelta; }); // Sort by highest # of watchers. repos.sort(function (a, b) { if (a.hotness < b.hotness) return 1; if (b.hotness < a.hotness) return -1; return 0; }); // Only first 12 hotest repos are shown. $.each(repos.slice(0,12), function (i, repo) { addRepo(repo); }); // Sort by most-recently pushed to. repos.sort(function (a, b) { if (a.pushed_at < b.pushed_at) return 1; if (b.pushed_at < a.pushed_at) return -1; return 0; }); $.each(repos.slice(0, 3), function (i, repo) { addRecentlyUpdatedRepo(repo); }); }); }}); })(jQuery);

The HTML code:

1. <div class="row"> <h2 align="center">Sharing code repositories</h2> <div id="wrapper" class="grid clearfix"> <div id="main" class="grid-1"> <div><h2>Xiaodong Qi's Open-source Repositories</h2></div> <h4> This is some sample text here.</h4> </div> <div class="grid grid-3"> <div id="statistics" class="grid-1 alpha header"> <h1 style="margin: 5px 5px 0;">Statistics</h1> <p style="margin: 5px 5px 0px;"> <a href="https://github.com/i2000s/repositories"><span id="num-repos">&nbsp;</span> public repos</a> </p> <p style="margin: 5px 5px 0px;"><a href="https://github.com/i2000s">https://github.com/i2000s</a></p> </div> <div id="recently-updated" class="grid-2 omega header"> <h1 style="margin: 5px 5px 0;">Recently updated <a href="https://github.com/i2000s/repositories">View All on GitHub</a></h1> <ol id="recently-updated-repos" style="margin-left: -15px; margin-top: 15px"></ol> </div> </div> <ol id="repos"></ol> </div> </div>

   
   

Thanks!