前端做数据处理，将带有相同属性的对象合并成一个对象数组并依据数据插入到dom中

数据处理

假设下面是后端返回的数据：

 [
        {
            "app": "Ticket", 
            "createtime": "2021-10-18 22:03:28", 
            "enable": 1, 
            "client": "WebPc", 
            "online": 1, 
            "id": 39, 
            "version": "1.1.4", 
            "content": "防止对操作按钮的进行多次点击"
        }, 
        {
            "app": "Ticket", 
            "createtime": "2021-10-18 22:01:28", 
            "enable": 1, 
            "client": "WebPc", 
            "online": 1, 
            "id": 38, 
            "version": "1.1.4", 
            "content": "增加线程锁"
        }, 
        {
            "app": "Ticket", 
            "createtime": "2021-10-17 21:43:26", 
            "enable": 1, 
            "client": "WebPc", 
            "online": 1, 
            "id": 14, 
            "version": "1.1.3", 
            "content": "各应用系统管理员，可管理下辖的应用配置"
        }, 
        {
            "app": "Ticket", 
            "createtime": "2021-10-17 21:41:58", 
            "enable": 1, 
            "client": "WebPc", 
            "online": 1, 
            "id": 13, 
            "version": "1.1.3", 
            "content": "动态应用菜单"
        },
        {
            "app": "Ticket",
            "createtime": "2021-10-15 13:31:46", 
            "enable": 1, 
            "client": "WebPc", 
            "online": 1, 
            "id": 1, 
            "version": "1.1.2", 
            "content": "一二级支持和标准工时绑定"
        }, 
        {
            "app": "Ticket",
            "createtime": "2021-10-17 22:21:05", 
            "enable": 1, 
            "client": "WebPc", 
            "online": 1, 
            "id": 29, 
            "version": "1.1.0", 
            "content": "管理员编辑工单功能"
        }, 
        {
            "app": "Ticket", 
            "createtime": "2021-10-17 22:06:31", 
            "enable": 1, 
            "client": "WebPc", 
            "online": 1, 
            "id": 26, 
            "version": "1.1.0", 
            "content": "集成skywalking"
        }, 
        {
            "app": "Ticket", 
            "createtime": "2021-10-17 22:24:00", 
            "enable": 1, 
            "client": "WebPc", 
            "online": 1, 
            "id": 31, 
            "version": "1.0.9", 
            "content": "增加版本"
        }
    ], 

上面的数据都是并列返回的，需要自己做整合，根据版本号的不同做整合。
版本号相同的数据整合到一起，版本号不同的依次做整理。

 let data = res.data
 let arr = {}
 for(let item of data){
  if(arr[item.version] == undefined){
     arr[item.version] = []
   }
 }
 $(data).each(function(index,item){
  arr[item.version].push(item);
 })

或者像下面这样，都是一样的结果

 let arr = {}
 for(let item of data){
   if(!item.version){
     continue;
   }
   if(!arr.hasOwnProperty(item.version)){
     arr[item.version]=[];
   }
   arr[item.version].push(item);
}

将数据整理好后，就是依据数据格式，往页面中插入，使用jq

$.each(arr,function(key,value) {
  var str = "<div class='log-time-box'><div class='log-progress-tag'></div><div class='login-time-tag'>" + key + "</div></div>" +
            "<div class='lifecyclenode' ><div class='status_block clearfix'><div class='newContent'>更新的内容如下：</div> " +
            "<ol class='life-node-content-1' node-version='"+key+"'>"+"</ol></div></div>";
  $(value).each(function (index, item) {
     //找到对应的父节点
     var str1 = "<li>" + item.content + "</li>"
     $str.find(".life-node-content-1").append(str1)
   })
   $('.dialog').append($str)
 });

这时我可以用 ${(}^{\prime }.dialo{g}^{\prime }).append($str)将版本号插入，但是却插不进去版本中的更新内容，原因是 $(’.dialog’)是我在html中已经定义好了的div，可以直接插入，并且我的代码中 ${(}^{\prime }.dialo{g}^{\prime }).append($str)是在最后插入的，而 $str.find(".life-node-content-1").append(str1)是要追加到.life-node-content-1中，此时在页面dom中是没有这个元素的，插入不进去，他们现在只是一个对象。

这时将str用jq的$包上，意味着目前是一个对象，插入也是插入到对象中，对对象进行操作，最后再插入到dom中：

$.each(arr,function(key,value) {
       var $str = $("<div class='log-time-box'><div class='log-progress-tag'></div><div class='login-time-tag'>" + key + "</div></div>" +
           "<div class='lifecyclenode' ><div class='status_block clearfix'><div class='newContent'>更新的内容如下：</div> " +
           "<ol class='life-node-content-1' node-version='"+key+"'>"+"</ol></div></div>");
       $(value).each(function (index, item) {
         //找到对应的父节点
         var str1 = "<li>" + item.content + "</li>"
         $str.find(".life-node-content-1").append(str1)
       })
       $('.dialog').append($str)
     });