使用jQuery JSON數據對數組排序

Question

我想弄清楚如何對php腳本提供的數組進行排序。 PHP腳本獲取目錄中的html文件，然後將它們傳遞給jQuery，然後jQuery將它們提取並顯示在頁面上。這是我的：

<script> 
$(document).ready(function(){ 
    $.getJSON('helper.php', function(data) { 
    var items = []; 
    $.each(data, function(key, val) { 
     $.get("articles/" + val, function(html){ 
      $("#postdata").append(html); 
      }, 'html'); 
    }); 
    }); 
}); 
</script> 

如何對它們進行排序（或反向）排序？文件名的格式爲{S} -post-slug.html，其中{S}是紀元之後的秒數。我希望能夠首先顯示最新的文件。

Answer 1

這可能是你在找什麼。 http://phpjs.org/functions/ksort:460

幾乎如何php ksort的作品。

Answer 2

這不是特別容易，因爲您有N個異步$.get()操作並行進行，並且每個操作在未知時間完成。我能想到的唯一選項是：

1. 在插入任何內容之前，先保存數組中的所有數據，然後按照排序順序插入它們。這有一個缺點，即在檢索完所有數據之前，頁面中不會顯示任何數據。
2. 當文章到達時，按照正確的順序插入每一篇文章。這可能是最好的用戶體驗，但是需要編寫的代碼最多。
3. 插入所有文章，然後在完成最後一篇文章時，將它們排序在DOM中。這會在內容到達時顯示，但隨後會將其移至所有位置。這可能是最不可取的。

下面是按照順序插入每篇文章的方法（它們可以按任意順序到達），我認爲這是最好的用戶體驗。文章將出現在順序到達時：

$(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'); 
    }); 
    }); 
}); 

Answer 3

這裏是一個辦法做到這一點在JavaScript但是如果你可以整理你的數據的服務器端會被用戶理解：

$(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); 
    }); 
    }); 
});