如何使用JavaScript For In或Object.keys循環從json數組訂購帖子

Question

我想知道如何使用in或object.keys循環從json提要url中的帖子中按對象排序帖子。 這是3個帖子的json提要的示例：

{
    "entry":[
         {
            "id": 1,
            "thumbnail": "/images/1.jpg",
            "title": "This is a Title 1",
            "time": "13, Oct 2016",
            "summary": "Lorem ipsum dolor sit amet.",
            "comCount": 5
        },
         {
            "id": 2,
            "thumbnail": "/images/2.jpg",
            "title": "This is Post Title 2",
            "time": "14, Oct 2016",
            "summary": "Lorem ipsum dolor sit amet.",
            "comCount": 0
        },
         {
            "id": 3,
            "thumbnail": "/images/3.jpg",
            "title": "This is Post Title 3",
            "time": "15, Oct 2016",
            "summary": "Lorem ipsum dolor sit amet.",
            "comCount": 10
        }
    ]
}

如您所見，對象“ comCount ”是指條目評論的數量，我真正需要的是按討論最多的順序對帖子進行排序！

這是我的代碼，但是默認情況下只是給我命令：

$(function () {

    var $mostDiscussed = $('.most-discussed');

    $.ajax({
        type: 'GET',
        url: '/json/feeds/api.json',
        dataType: 'json',
        success: function(data) {
            var htmlcode= '<ul>';
            var feedcode = '';
            for (var i=0; i<data.entry.length; i++) {
                var id = data.entry[i].id,
                    title = data.entry[i].title,
                    thumbnail = data.entry[i].thumbnail,
                    summary = data.entry[i].summary;
                    time = data.entry[i].time,
                    count = data.entry[i].comCount,
                    thumb = '<img width="100%" src="' + thumbnail + '" title="' + title + '" alt=" ' + title + '" />';
                feedcode += '<li id="' + id + '" class="post">' + thumb + '<h3>' + title + '</h3><ul><li class="meta-time">' + time + '</li><li class="meta-comments">' + count + ' Comments</li></ul><p>' + summary + '<p></li>';
            }
            feedcode += '</ul>';
            htmlcode += feedcode;
            $mostDiscussed.html(htmlcode);
        }
    });

})

HTML代碼只是一個div：

<div class="most-discussed"></div>

我真的需要知道如果可能的話，如何按數組的對象值排序！ 提前致謝！

抱歉，我忘了解釋一些事情，我需要這個命令位於前端而不是json文件中！ 因為我需要為“討論最多的帖子”創建一個Blogger插件。

Answer 1

您可以僅對提要對象進行排序，然后進行迭代。

 function SortData() { var feed = { "entry": [{ "id": 1, "thumbnail": "/images/1.jpg", "title": "This is a Title 1", "time": "13, Oct 2016", "summary": "Lorem ipsum dolor sit amet.", "comCount": 5 }, { "id": 2, "thumbnail": "/images/2.jpg", "title": "This is Post Title 2", "time": "14, Oct 2016", "summary": "Lorem ipsum dolor sit amet.", "comCount": 0 }, { "id": 3, "thumbnail": "/images/3.jpg", "title": "This is Post Title 3", "time": "15, Oct 2016", "summary": "Lorem ipsum dolor sit amet.", "comCount": 10 }] }; let sortedData = feed.entry.sort(function(obj1, obj2) { return obj2.comCount - obj1.comCount }); return { entry: sortedData }; } $(function() { var $mostDiscussed = $('.most-discussed'); var data = SortData(); var htmlcode = '<ul>'; var feedcode = ''; for (var i = 0; i < data.entry.length; i++) { var id = data.entry[i].id, title = data.entry[i].title, thumbnail = data.entry[i].thumbnail, summary = data.entry[i].summary; time = data.entry[i].time, count = data.entry[i].comCount, thumb = '<img width="100%" src="' + thumbnail + '" title="' + title + '" alt=" ' + title + '" />'; feedcode += '<li id="' + id + '" class="post">' + thumb + '<h3>' + title + '</h3><ul><li class="meta-time">' + time + '</li><li class="meta-comments">' + count + ' Comments</li></ul><p>' + summary + '<p></li>'; } feedcode += '</ul>'; htmlcode += feedcode; $mostDiscussed.html(htmlcode); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="most-discussed"> </div> 

Answer 2

將javascript sort()函數與自定義比較器函數結合使用，可以根據對象數組上的對象值進行排序。 對於前端，只需排序然后遍歷數據即可；

function compare(a,b) {
  if (a.comCount > b.comCount)
    return -1;
  if (a.comCount < b.comCount)
    return 1;
  return 0;
}

 $(function(){ var data = [ { "id": 1, "thumbnail": "/images/1.jpg", "title": "This is a Title 1", "time": "13, Oct 2016", "summary": "Lorem ipsum dolor sit amet.", "comCount": 5 }, { "id": 3, "thumbnail": "/images/3.jpg", "title": "This is Post Title 3", "time": "15, Oct 2016", "summary": "Lorem ipsum dolor sit amet.", "comCount": 10 }, { "id": 2, "thumbnail": "/images/2.jpg", "title": "This is Post Title 2", "time": "14, Oct 2016", "summary": "Lorem ipsum dolor sit amet.", "comCount": 0 } ] function compare(a,b) { return (b.comCount- a.comCount) } data.sort(compare); var htmlcode= '<ul>'; var feedcode = ''; for (var i=0; i<data.length; i++) { var id = data[i].id, title = data[i].title, thumbnail = data[i].thumbnail, summary = data[i].summary; time = data[i].time, count = data[i].comCount, thumb = '<img width="100%" src="' + thumbnail + '" title="' + title + '" alt=" ' + title + '" />'; feedcode += '<li id="' + id + '" class="post">' + thumb + '<h3>' + title + '</h3><ul><li class="meta-time">' + time + '</li><li class="meta-comments">' + count + ' Comments</li></ul><p>' + summary + '<p></li>'; } feedcode += '</ul>'; htmlcode += feedcode; $('.most-discussed').html(htmlcode); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="most-discussed"></div>