如何将扁平数组重组为嵌套数组以适配Vue遍历需求

原始数据 #

[{
   "Type1":[
      {
         "ID":2,
         "DATE":"2017-08-08",
         "SENDER":3
      },
      {
         "ID":1,
         "DATE":"2017-07-07",
         "SENDER":2
      },
      {
         "ID":1,
         "DATE":"2017-06-07",
         "SENDER":3
      }
   ]
}]

当前尝试的代码（得到对象而非数组） #

this.TimelineV2 = this.timelineArr['Type1'].reduce(function (r, a) {
    r[a.ID] = r[a.ID] || [];
    r[a.ID].push(a);
    return r;
}

期望的结果结构 #

[{
   "Type1":[
      {
         "ID":2,
         "DETAILS":[
            {
               "DATE":"2017-08-08",
               "SENDER":3
            }
         ]
      },
      {
         "ID":1,
         "DETAILS":[
            {
               "DATE":"2017-07-07",
               "SENDER":2
            },
            {
               "DATE":"2017-06-07",
               "SENDER":3
            }
         ]
      }
   ]
}]

解决方案 #

调整reduce的逻辑，先构建按ID分组的对象，再把对象转换为数组，同时整理出DETAILS嵌套结构：

// 提取原始Type1数组（注意timelineArr是数组，需取第一个元素）
const type1List = this.timelineArr[0].Type1;

// 按ID分组，生成包含ID和DETAILS的结构
const groupedData = type1List.reduce((result, item) => {
    // 若当前ID未在结果中，初始化节点
    if (!result[item.ID]) {
        result[item.ID] = {
            ID: item.ID,
            DETAILS: []
        };
    }
    // 将DATE和SENDER存入DETAILS
    result[item.ID].DETAILS.push({
        DATE: item.DATE,
        SENDER: item.SENDER
    });
    return result;
}, {});

// 将分组对象的值转为数组，组装成最终结构
this.TimelineV2 = [{
    Type1: Object.values(groupedData)
}];

逻辑说明 #

1. 用reduce遍历原始数组，以ID为键构建对象，每个键对应一个包含ID和DETAILS的节点
2. 遍历过程中，把每个条目的DATE和SENDER提取出来，加入对应ID节点的DETAILS数组
3. 最后用Object.values()把分组对象的所有值提取为数组，这就是Type1需要的嵌套数组结构，再包裹成外层数组格式即可

这样得到的结构可以直接在Vue中先遍历Type1数组（每个元素是一个ID节点），再遍历该节点的DETAILS数组展示具体数据。

内容的提问来源于stack exchange，提问作者Qiuzman