Wie zeigt man Daten gemäß JSON-Antwort an?

Question

ich habe eine JSON-Antwort in diesem 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"}] 

ich diese Nachrichten in Chat-Box zeigen möchten, aber Datum weise wie erste Show Datum 25. Mai 2015 dann Nachricht und die alle Nachricht an diesem Tag in dieser gezeigten Zusammenhang Nach dem neuen Datum wird angezeigt, dass in der nächsten Zeit 31. Mai 2015 die Nachricht 1 die Nachricht 2 so weiter geht.

Und ich drucke so, es einfach die Nachricht anhängen, aber ich brauche , um es mit Datum und Uhrzeit zu filtern.

Answer 1

folgenden Code können nach Datum

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)

die Gruppierung tun Jetzt können Sie das Datum in der gleichen Art und Weise auf dem UI Sie gruppieren. Zum Beispiel

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

Answer 2

Sie könnten die Daten gruppieren und später die Schlüssel abrufen und sie nach Bedarf für die gruppierte Ausgabe sortieren.

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