how to show data date wise according to json response?

Question

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

I want to show these messages in chat box but date wise like first show date 25 May 2015 then message and all the message related to that date shown in this after new date come its shown that in next time 31 May 2015 message 1 message 2 so on.

And i am printing like this, its simply append the message but i need to filter it with date and time.

for (i = 0; i < msg1.length; i++) { 


    var el = $('<li class="message right appeared"><div class="avatar"><img src="'+url+'/service/getUserImage/'+msg1[i].userID +'/60"/></div><div class="text_wrapper"><div class="text">'+msg1[i].message+'</div></div></li>');
                 $(".chat_window ul").append(el);


                    }

So what's the problem? At the moment you seem to be asking how to parse JSON, sort an array, loop over an array and add new content to the DOM. Which of those problems is giving you trouble? What research have you done to try to solve it yourself? — Quentin, May 31 '16 at 12:31
You should have to get filtered out the data from db orderby desc with date field. — Banwari Yadav, May 31 '16 at 12:33
@gurvinder372: i cann't handle this. That is coming from third party. I need to show this response data in chat window but according to the date like our whats app msg that show yesterday messages in one group and today messages in another group — Sumit Aggarwal, May 31 '16 at 12:36
@AlonEitan: No i didn't forgot anything. Above is the json response which i need to show date wise like whats app msgs — Sumit Aggarwal, May 31 '16 at 12:37
@SumitAggarwal you need to show us where you are stuck while solving this problem. — gurvinder372, May 31 '16 at 12:38
Duplicate of: http://stackoverflow.com/questions/1129216/sort-array-of-objects-by-string-property-value-in-javascript — Quentin, May 31 '16 at 12:45
@quentin: you are thinking about sort i don't want to sort the data. Please have a look in json. I have to append date first like in json response "25 may 2016" ,"fsbdfs", "time". Now in next message have same date then i need to skip date and append "hi","06:33:52" — Sumit Aggarwal, May 31 '16 at 12:47

gurvinder372 · Accepted Answer · 2016-05-31T13:30:38.923

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

data may be sorted but not grouped by date, which is what my code does — gurvinder372, May 31 '16 at 12:55
@SumitAggarwal you need to iterate the map and show the data accordingly — gurvinder372, May 31 '16 at 13:00
its give me like this Object { 2016-05-31=[10]} don't know how to iterate the loop int this — Sumit Aggarwal, May 31 '16 at 13:24

Nina Scholz · Answer 2 · 2016-05-31T13:31:33.783

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);

can you tell me please in UO how can i print this – Sumit Aggarwal May 31 '16 at 12:58 — Sumit Aggarwal, May 31 '16 at 12:58

how to show data date wise according to json response?

2 Answers2

Linked