如何根据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响应显示数据明智吗？

回答

相关问题