Uikithemes Uikithemes - 1 month ago 5
jQuery Question

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

I would like to know how I can order posts by an object inside an arrary of posts from a json feed url, using for in or object.keys loop. this is an example of my json feed of a 3 posts :

{
"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
}
]
}


As you see there is an object "comCount" is mean the number of comments of entries, what I really need is to order my posts by most discussed!

This is my code but is just give me the order by default :

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

})


The Html code is just a div :

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


I really need to know how I can sort by an object value of an array if is possible! thanks in advance!


Sorry guys I forget to explain something I need this order to be on
the front end not on the json file! because I need to create a blogger
plugin for Most Discussed Posts.

Answer

You could just sort the feed object and then iterate.

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>