如何根據json響應顯示數據明智嗎？

-4

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

我想聰明的聊天中顯示框，但迄今爲止這些消息像第一場演出日期25 2015年5月則在此顯示信息，所有與該日消息在新的日期到來之後它顯示在下一次2015年5月31日的留言1留言2等等。

而我打印這樣，它只是附加信息，但我需要過濾日期和時間。

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


        }

來源

2016-05-31 Sumit Aggarwal

你忘了添加代碼 –

那麼，有什麼問題呢？目前，您似乎在問如何解析JSON，對數組進行排序，遍歷數組並向DOM添加新內容。哪些問題給你帶來麻煩？你已經做了什麼研究來嘗試自己解決它？ – Quentin

您應該必須從db orderby desc中使用日期字段過濾掉數據。 –

下面的代碼可以按日期

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)

做分組現在你可以在你的UI通過相同的方式之日起不分組。例如

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

來源

2016-05-31 12:51:22 gurvinder372

已經將數據按json排序。但問題顯示n UI –

數據可能會排序，但不按日期分組，這是我的代碼 – gurvinder372

o是的，你可以請告訴我如何顯示在UI –

您可以對數據進行分組，然後獲取按鍵並根據分組輸出的需要進行分類。

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

來源

2016-05-31 12:51:03

你能告訴我請在UO我怎麼能打印這個 –

什麼是** UO **？ –

UI前端 –

如何根據json響應顯示數據明智嗎？

回答

相關問題