关于js通过数据格式自动生成表头的问题，合并单元格

Question

假如有下面的一组数据

[
    {
        name: 'AAA',
        age: 12,
        score: {
            type1: {
                item1: 12,
                item2: 23,
                item3: 23
            },
            type2: {
                item4: 12,
                item5: 23,
                item6: 23
            }
        }
    }, {
        name: 'BBB',
        age: 12,
        score: {
            type1: {
                item1: 12,
                item2: 23,
                item3: 23
            },
            type2: {
                item4: 12,
                item5: 23,
                item6: 23
            }
        }
    }
]

有没有不是特别复杂办法生成下面的table
主要是怎么通过计算的方式生成复杂的表头，因为数据格式是不一定的，我搞了一天了搞不明白，特此求助

name	age	score
		type1			type2
		item1	item2	item3	item1	item2	item3
AAA	12	12	23	23	12	23	23
AAA	12	12	23	23	12	23	23

Answer 1

好吧，好像确实有问题

后来又尝试写了一下

• 先把数组每个元素当成一个树，之后合并到一个树中
• 前序遍历求出每个节点下所有叶子节点的个数，比如 type2 这个节点就有5个所有叶子节点
• 层序遍历这个树的每个节点，每层开始在表头添加一个 tr 元素 ，并记录下这个元素。然后遍历这一层的节点，如果有子节点则添加 <td colspan="x">，x 为上面所有叶子节点数量；如果没有子节点则添加 <td rowspan="y"> y 为 “合并树的最大深度 - 当前深度” （表头画完）
• 遍历数组中每一个树，完善数据

const appendTd = (tr, hasChild, size, name) => {
  const td = document.createElement('td')
  if (hasChild) {
    td.setAttribute('colspan', size)
  } else {
    td.setAttribute('rowspan', size)
  }
  td.innerText = name
  tr.appendChild(td)
}

//------------ 原答案 ----------------

这里只提供一种思路，详细代码就不写了

// const data = ...原始数据
let table = {}
data.map((item) => {
  table = {...table, ...item}
})
console.log(table)

首先利用 es6 解构，将所有对象具有的属性合并起来，你就可以得到一个完整的表头的结构，这里数据不重要。

{ name: 'BBB',
  age: 12,
  score:
   { type1: { item1: 12, item2: 23, item3: 23 },
     type2: { item4: 12, item5: 23, item6: 23 } } }

之后一层一层遍历这个对象树，就能得到整个表头了

表头画好后，用刚刚得到的表头去挨个遍历每个数据项，并且画单元格，没有数据不填。