如何使用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>