如何从对象数组创建树视图表-Javascript

我想在树状视图中生成html表

为此，我有以下对象数组：

var data = [{
    "Column01": "1",
    "Column02": null,
    "Column03": null,
    "Column04": "25.00"
},{
    "Column01": "1",
    "Column02": "Alabama",
    "Column03": null,
    "Column04": "25.00"
},{
    "Column01": "1",
    "Column02": "Alabama",
    "Column03": " Birmingham",
    "Column04": "25.00"
},{
    "Column01": "2",
    "Column02": null,
    "Column03": null,
    "Column04": "75.00"
},{
    "Column01": "2",
    "Column02": "Alaska",
    "Column03": null,
    "Column04": "75.00"
},{
    "Column01": "2",
    "Column02": "Alaska",
    "Column03": " Fairbanks",
    "Column04": "75.00"
},{
    "Column01": "3",
    "Column02": null,
    "Column03": null,
    "Column04": "50.00"
},{
    "Column01": "3",
    "Column02": "California",
    "Column03": null,
    "Column04": "50.00"
},{
    "Column01": "3",
    "Column02": "California",
    "Column03": " San Francisco",
    "Column04": "50.00"
},{
    "Column01": "4",
    "Column02": null,
    "Column03": null,
    "Column04": "100.00"
},{
    "Column01": "4",
    "Column02": "Indiana",
    "Column03": null,
    "Column04": "100.00"
},{
    "Column01": "4",
    "Column02": "Indiana",
    "Column03": "Indianapolis",
    "Column04": "100.00"
}];

这是我在表视图中的对象

如何修改我的对象（数据）以方便生成树状视图

在fiddle中，您可以看到一个硬编码表（这是我必须实现的结果，但是动态的）以及提供给我使用的数组：

---

我从数据对象创建了一个基本表。这是我的代码

控件
风险值数据=[{
“Column01”：“1”，
“Column02”：空，
“Column03”：空，
“Column04”：“25.00”
}, {
“Column01”：“1”，
“Column02”：“阿拉巴马州”，
“Column03”：空，
“Column04”：“25.00”
}, {
“Column01”：“1”，
“Column02”：“阿拉巴马州”，
“专栏03”：“伯明翰”，
“Column04”：“25.00”
}, {
“Column01”：“2”，
“Column02”：空，
“Column03”：空，
“Column04”：“75.00”
}, {
“Column01”：“2”，
“Column02”：“阿拉斯加”，
“Column03”：空，
“Column04”：“75.00”
}, {
“Column01”：“2”，
“Column02”：“阿拉斯加”，
“专栏03”：“费尔班克斯”，
“Column04”：“75.00”
}, {
“Column01”：“3”，
“Column02”：空，
“Column03”：空，
“第04栏”：“50.00”
}, {
“Column01”：“3”，
“Column02”：“California”，
“Column03”：空，
“第04栏”：“50.00”
}, {
“Column01”：“3”，
“Column02”：“California”，
“专栏03”：“旧金山”，
“第04栏”：“50.00”
}, {
“Column01”：“4”，
“Column02”：空，
“Column03”：空，
“Column04”：“100.00”
}, {
“Column01”：“4”，
“Column02”：“印第安纳”，
“Column03”：空，
“Column04”：“100.00”
}, {
“Column01”：“4”，
“Column02”：“印第安纳”，
“专栏03”：“印第安纳波利斯”，
“Column04”：“100.00”
}];
var table=document.getElementById（'mytable'）；
var-str=''；
//加标题
str+=''+''+''索引'+''；
Object.key（数据[0]）.forEach（val=>{
//console.log（数据[元素][val]）；
str+=''+val+''
});
str+=''
//增加价值
Object.keys（数据）.forEach（元素=>{
//console.log（数据[元素]）；
str+=''+''+元素+''；
Object.keys（数据[元素]）.forEach（val=>{
//console.log（数据[元素][val]）；
str+=''+数据[元素][val]+''；
});
str+=''；
})
table.innerHTML=str；

如果您的数据按照您给定的顺序排序，那么它将正常工作。否则，您必须处理数据。 希望现在我明白了问题所在，这就是解决办法

var数据=[{
“Column01”：“1”，
“Column02”：空，
“Column03”：空，
“Column04”：“25.00”
}, {
“Column01”：“1”，
“Column02”：“阿拉巴马州”，
“Column03”：空，
“Column04”：“25.00”
}, {
“Column01”：“1”，
“Column02”：“阿拉巴马州”，
“专栏03”：“伯明翰”，
“Column04”：“25.00”
}, {
“Column01”：“2”，
“Column02”：空，
“Column03”：空，
“Column04”：“75.00”
}, {
“Column01”：“2”，
“Column02”：“阿拉斯加”，
“Column03”：空，
“Column04”：“75.00”
}, {
“Column01”：“2”，
“Column02”：“阿拉斯加”，
“专栏03”：“费尔班克斯”，
“Column04”：“75.00”
}, {
“Column01”：“3”，
“Column02”：空，
“Column03”：空，
“第04栏”：“50.00”
}, {
“Column01”：“3”，
“Column02”：“California”，
“Column03”：空，
“第04栏”：“50.00”
}, {
“Column01”：“3”，
“Column02”：“California”，
“专栏03”：“旧金山”，
“第04栏”：“50.00”
}, {
“Column01”：“4”，
“Column02”：空，
“Column03”：空，
“Column04”：“100.00”
}, {
“Column01”：“4”，
“Column02”：“印第安纳”，
“Column03”：空，
“Column04”：“100.00”
}, {
“Column01”：“4”，
“Column02”：“印第安纳”，
“专栏03”：“印第安纳波利斯”，
“Column04”：“100.00”
}];
var table=document.getElementById（'mytable'）；
var-str=''；
//增加价值
Object.keys（数据）.forEach（元素=>{
var-arr=[]；
Object.keys（数据[元素]）.forEach（val=>{
arr.push（数据[元素][val]）；
});
arr=arr.filter（功能（el）{
返回el！=null；
});
var pad=（阵列长度-2）*20；
var style=“padding left:”+pad；
//console.log（风格）；
str+=''；
如果（arr.length==2）str+='State'
str+=arr[arr.length-2]+''；
str+=''+arr[arr.length-1]+''；
});
table.innerHTML=str

控件
你误解了这个问题。这是期望的结果：，不仅是硬编码的，而且是动态的。您渲染的表已完成。是否尝试通过添加这些样式动态生成表？？我已经动态制作了表格。这不是样式的问题，而是结构的问题。看这里-这应该是结果->没有空值，没有重复值，按状态分组。谢谢@tuhin47！这就是我想要的结果。