Question

我有这种格式的json响应：

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

我想在聊天框中显示这些消息但是日期明智，如第一个显示日期2015年5月25日然后消息以及与此日期相关的所有消息显示在新的日期之后显示在下一次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);


                    }

Answer 1

您可以对数据进行分组，然后获取密钥并根据分组输出的需要对其进行排序。

＆＃13;

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

＆＃13;

Answer 2

以下代码可以按日期进行分组

＆＃13;

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)

＆＃13;

现在，您可以按照相同的方式按日期对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
  });
});

如何根据json响应显示数据日期？

2 个答案: