如何使用javascript For In或Object从json数组中订购帖子.键循环

How to order posts from json array using javascript For In, or Object.keys loop

本文关键字：循环 数组 json For javascript 何使用 In Object      更新时间：2023-09-26

我想知道如何通过json feed url中的一系列帖子中的对象来订购帖子，使用in或object。键循环。这是我的json feed的3个帖子的一个例子:

{
    "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文件!因为我需要创建一个博主讨论最多的帖子插件。

您可以对提要对象进行排序，然后进行迭代。

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>

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

相关文章：