Sorting an array with jQuery JSON data

This might be what you are looking. http://phpjs.org/functions/ksort:460

pretty much how php ksort works.

Here is a way to do this in JavaScript however if you can sort your data server-side it would be appreciated by your users:

 $(function(){
   var jqXHR = [],//setup an array to store references to the `$.get()` jqXHR objects
       arr   = [],//setup an array to store the URLs and sort them numerically
       obj   = {};//setup an object o link URLs to HTML
   $.getJSON('helper.php', function(data) {
     $.each(data, function(key, val) {

       //add each `$.get()` request to our queue
       jqXHR.push($.get("articles/" + val, function(html){

             //add the URL to our array
             arr.push(val);

             //add the HTML to our object referenced by the URL
             obj[val] = html;
           }, 'html'));
     });

     //run the sort/append code after all the AJAX calls have been finished
     $.when(jqXHR).then(function () {

         //sort the array numerically descending
         arr.sort(function(a,b){

             //only sort by the numeric values in the URLs which should be everything before the first `-` character (hyphen)
             a = a.split('-')[0];
             b = b.split('-')[0];
             return b - a
         });

         //iterate through our array of sorted URLs and concoct them into a HTML string
         var len = arr.length,
             out = '';
         for (var i=0; i<len; i++) {
             out += obj[arr[i]];
         }

         //append our HTML string to the DOM
         $("#postdata").append(out);
     });
   });
 });

This is not particularly easy because you have N asynchronous $.get() operations proceeding in parallel and each finishing at unknown times. The only options I can think of are:

1. Hold all the data in an array and sort the array before inserting anything and then insert them in the sorted order. This has the disadvantage that no data will appear in the page until all the data has been retrieved.
2. As the articles arrive, insert each one in the proper order. This is probably the best user experience, but the most code to write.
3. Insert all the articles and then when the last one is done, sort them in the DOM. This shows content as it arrives, but then moves it all around. This is probably the least desirable.

Here's a way to insert each article in order as they arrive (they can arrive in any order) which I think is the best user experience. Articles will appear in order as they arrive:

 $(document).ready(function(){
   $.getJSON('helper.php', function(data) {
     $.each(data, function(key, val) {
        $.get("articles/" + val, function(html){

            // parse the article time out of the filename
            var time = 0;
            var matches = val.match(/\d+/);
            if (matches) {
                time = parseInt(matches, 10);
            }

            // create new article and tag it with an identifying class
            // and the filename time
            var o = $(html);
            o.data("ftime", time);
            o.addClass("timedArticle");

            // now find where to insert this article (newest articles first)
            // by finding the first article whose time is less than the 
            // time of the article to insert
            var target;
            $("#postdata").children(".timedArticle").each(function() {
                if ($(this).data("ftime") < time) {
                    target = this;
                    return(false);
                }
            });
            if (target) {
                o.insertBefore(target);
            } else {
                $("#postdata").append(o);
            }
        }, 'html');
     });
   });
 });