如何从对象生成具有多级标题的数据透视表？

Question

我想从给定的 2 个对象生成 HTML 表，但它有太多嵌套的标题，我似乎无法管理。

最终结果如下：

这是我创建表格时获得的数据：

var columnData = [  {Col001: "1",Col002: "John Barnes",Col003: "Martha Hall",Col004: "Small",Col005: "Has a Drive-Thru",Col006: "Dustin Kensrue", ScorePct: "84.7"},
                {Col001: "2",Col002: "John Barnes",Col003: "Martha Hall",Col004: "Small",Col005: "Has a Drive-Thru",Col006: "Dustin Kensrue", ScorePct: "93.8"},
                {Col001: "2",Col002: "John Barnes",Col003: "Martha Hall",Col004: "Small",Col005: "Has a Drive-Thru",Col006: "Ninja Koto", ScorePct: "87.5"},
                {Col001: "3",Col002: "Russell Montgomery",Col003: "Judith Rodriguez",Col004: "Small",Col005: "Has a Drive-Thru",Col006: "Dustin Kensrue", ScorePct: "90.3"},
                {Col001: "4",Col002: "Russell Montgomery",Col003: "Judith Rodriguez",Col004: "Small",Col005: "Has a Drive-Thru",Col006: "Ninja Koto", ScorePct: "83.3"},
                {Col001: "5",Col002: "Russell Montgomery",Col003: "Alice Butler",Col004: "Medium",Col005: "Has a Drive-Thru",Col006: "Ed Waves", ScorePct: "90.3"},
                {Col001: "6",Col002: "Russell Montgomery",Col003: "Alice Butler",Col004: "Medium",Col005: "Has a Drive-Thru",Col006: "Ed Waves", ScorePct: "87.5"},
                {Col001: "7",Col002: "Russell Montgomery",Col003: "Stephen Peterson",Col004: "Medium",Col005: "No Drive-Thru",Col006: "Dustin Kensrue", ScorePct: "90.6"},
                {Col001: "7",Col002: "Russell Montgomery",Col003: "Stephen Peterson",Col004: "Medium",Col005: "No Drive-Thru",Col006: "Ed Waves", ScorePct: "68.8"},
                {Col001: "7",Col002: "Russell Montgomery",Col003: "Stephen Peterson",Col004: "Medium",Col005: "No Drive-Thru",Col006: "Ninja Koto", ScorePct: "83.3"},
                {Col001: "8",Col002: "John Barnes",Col003: "Stephen Peterson",Col004: "Large",Col005: "No Drive-Thru",Col006: "Ninja Koto", ScorePct: "80.0"},
                {Col001: "8",Col002: "John Barnes",Col003: "Stephen Peterson",Col004: "Large",Col005: "No Drive-Thru",Col006: "Veela Faint", ScorePct: "96.9"},
                {Col001: "9",Col002: "John Barnes",Col003: "Russell Taylor",Col004: "Large",Col005: "No Drive-Thru",Col006: "Ninja Koto", ScorePct: "88.9"},
                {Col001: "10",Col002: "Russell Montgomery",Col003: "Carl Perry",Col004: "Large",Col005: "No Drive-Thru",Col006: "Ed Waves", ScorePct: "87.5"},
                {Col001: "10",Col002: "Russell Montgomery",Col003: "Carl Perry",Col004: "Large",Col005: "No Drive-Thru",Col006: "Veela Faint", ScorePct: "93.8"}];

var rowData = [ {ColID:"0",ColValue:"101",RowID:"1"},
            {ColID:"1",ColValue:"Varna",RowID:"1"},
            {ColID:"0",ColValue:"102",RowID:"2"},
            {ColID:"1",ColValue:"Dobrich",RowID:"2"},
            {ColID:"0",ColValue:"103",RowID:"3"},
            {ColID:"1",ColValue:"Plovdiv",RowID:"3"},
            {ColID:"0",ColValue:"104",RowID:"4"},
            {ColID:"1",ColValue:"Montana",RowID:"4"},
            {ColID:"0",ColValue:"105",RowID:"5"},
            {ColID:"1",ColValue:"Sofia",RowID:"5"},
            {ColID:"0",ColValue:"106",RowID:"6"},
            {ColID:"1",ColValue:"Sliven",RowID:"6"},
            {ColID:"0",ColValue:"107",RowID:"7"},
            {ColID:"1",ColValue:"Pomorie",RowID:"7"},
            {ColID:"0",ColValue:"108",RowID:"8"},
            {ColID:"1",ColValue:"Albena",RowID:"8"},
            {ColID:"0",ColValue:"109",RowID:"9"},
            {ColID:"1",ColValue:"Bourgas",RowID:"9"},
            {ColID:"0",ColValue:"110",RowID:"10"},
            {ColID:"1",ColValue:"Bansko",RowID:"10"}];

关于 columnData 对象：

列数据。Col001代表表格的每一行编号。

列数据。Col002到 columnData。Col005为表头，其中 001 为最高级别，005 为最低级别。

列数据。ScorePct每行对应的值

关于 rowData 对象：

行数据。RowID - 行号

行数据。ColID - 列号

行数据。ColValue - 对应的值

这是我到目前为止提出的解决方案：

https://jsfiddle.net/u5c21mg3/1/

我设法从这两个对象中构建了另一个对象（您将在 jsfiddle 的控制台中看到它），但我无法正确打印它。或者也许有更好的方法来构建第三个对象？任何帮助将不胜感激！

Answer 1

https://fiddle.jshell.net/jddz3jgz/2/

这是我的部分解决方案 - 按点分组。如果我能够提供帮助，我会很高兴，但不幸的是我无法提出标题的解决方案

更新：

完整解决方案：

https://fiddle.jshell.net/jddz3jgz/3/