How To Show Data Date Wise According To Json Response?

i have a json response in this format: [{'message':'fsbdfs','id':'8290','readBy':'2016-05-25 06:17:01','userID':'339','dateTime':'2016-05-25 06:16:32'},{'message':'Hi','id':'8291'

Solution 1:

Following code can do the grouping by date

var obj = [{
  "message": "fsbdfs",
  "id": "8290",
  "readBy": "2016-05-25 06:17:01",
  "userID": "339",
  "dateTime": "2016-05-25 06:16:32"
}, {
  "message": "Hi",
  "id": "8291",
  "readBy": "2016-05-25 6:33:52",
  "userID": "332",
  "dateTime": "2016-05-25 06:17:06"
}, {
  "message": "nbfsdbf",
  "id": "8292",
  "readBy": "",
  "userID": "339",
  "dateTime": "2016-05-25 07:03:44"
}, {
  "message": "jsdhfjsdhf",
  "id": "8293",
  "readBy": "",
  "userID": "339",
  "dateTime": "2016-05-25 07:06:55"
}, {
  "message": "fbsnf",
  "id": "8294",
  "readBy": "",
  "userID": "339",
  "dateTime": "2016-05-25 07:06:59"
}, {
  "message": "dfgjdf",
  "id": "8295",
  "readBy": "",
  "userID": "339",
  "dateTime": "2016-05-25 07:08:14"
}, {
  "message": "sim",
  "id": "8296",
  "readBy": "",
  "userID": "339",
  "dateTime": "2016-05-25 07:24:24"
}, {
  "message": "mgmdf,",
  "id": "8297",
  "readBy": "",
  "userID": "339",
  "dateTime": "2016-05-25 10:16:34"
}, {
  "message": "bvd",
  "id": "8317",
  "readBy": "",
  "userID": "339",
  "dateTime": "2016-05-31 06:25:40"
}, {
  "message": "fdfd",
  "id": "8318",
  "readBy": "",
  "userID": "339",
  "dateTime": "2016-05-31 06:25:43"
}];

obj.sort(function(a, b) {
  return a.dateTime.localeCompare(b.dateTime)
});

var map = {};
obj.forEach(function(val) {
  var date = val.dateTime.split(" ")[0];
  map[date] = map[date] || [];
  map[date].push(val)
});

console.log(map)

Now you can do grouping on your UI by the date in the same fashion. For example

Object.keys(map).forEach(function(date){
  //date is the date part which you want to group your conv with.

  map[date].forEach(function(item){
    //item is the each value in array
  });
});

Solution 2:

You could group the data, and later get the keys and sort them as desired for the grouped output.

var data = [{ "message": "fsbdfs", "id": "8290", "readBy": "2016-05-25 06:17:01", "userID": "339", "dateTime": "2016-05-25 06:16:32" }, { "message": "Hi", "id": "8291", "readBy": "2016-05-25 06:33:52", "userID": "332", "dateTime": "2016-05-25 06:17:06" }, { "message": "nbfsdbf", "id": "8292", "readBy": "", "userID": "339", "dateTime": "2016-05-25 07:03:44" }, { "message": "jsdhfjsdhf", "id": "8293", "readBy": "", "userID": "339", "dateTime": "2016-05-25 07:06:55" }, { "message": "fbsnf", "id": "8294", "readBy": "", "userID": "339", "dateTime": "2016-05-25 07:06:59" }, { "message": "dfgjdf", "id": "8295", "readBy": "", "userID": "339", "dateTime": "2016-05-25 07:08:14" }, { "message": "sim", "id": "8296", "readBy": "", "userID": "339", "dateTime": "2016-05-25 07:24:24" }, { "message": "mgmdf,", "id": "8297", "readBy": "", "userID": "339", "dateTime": "2016-05-25 10:16:34" }, { "message": "bvd", "id": "8317", "readBy": "", "userID": "339", "dateTime": "2016-05-31 06:25:40" }, { "message": "fdfd", "id": "8318", "readBy": "", "userID": "339", "dateTime": "2016-05-31 06:25:43" }],
    grouped = {},
    ul = document.createElement('ul');

data.forEach(function (a) {
    var key = a.dateTime.substring(0, 10);
    grouped[key] = grouped[key] || [];
    grouped[key].push(a);
});

Object.keys(grouped).sort().forEach(function (k) {
    var li = document.createElement('li');
    li.innerHTML = k;
    grouped[k].forEach(function (a) {
        var p = document.createElement('p');
        p.innerHTML = JSON.stringify(a);
        this.appendChild(p);
    }, li);
    ul.appendChild(li);
});
document.body.appendChild(ul);