Javascript 如何在表头显示嵌套的JSON值&；一行

我想根据屏幕截图在表头和行中显示嵌套的JSON值

但是，我当前的代码显示如下

如何获得第一个屏幕截图的结果

这是我的密码：

var tbl\u ss564\u ib\u jsonData=[
{
“序号”：“1”，
“SS564指标”：“电力使用效率（PUE）”，
“基线”：“2.2*”，
“DC”：[
{“A”：“2.4”}，
{“B”：“2.61”}，
{“C”：“2.46”}，
{“D”：“2.25”}，
{“E”：“2.11”}，
{“F”：“3.75”}，
{“G”：“2.08”}，
{“H”：“2.17”}，
{“I”：“1.85”}，
{“J”：“2.57”}，
{“K”：“2.42”}
]
}
]
var sortAscending=true；
变量tbl_ss564_ib=d3。选择（'ss564_ib_page_wrap'）。追加（'table'）；
var title_ss564_ib=d3.键（tbl_ss564_ib_jsonData[0]）；
var header_ss564_ib=tbl_ss564_ib.append（'thead'）。append（'tr'））
.selectAll（'th'）
.data（title_ss564_ib）.enter（）
.append（'th'）
.文本（功能（d）{
返回d；
})
.on（'点击'）功能（d）{
标题_ss564_ib.attr（'class'，'header'）；
如果（排序）{
sort（函数（a，b）{返回b[d]a[d]；}）；
sortAscending=true；
this.className='des'；
}
});
var rows=tbl_ss564_ib.append（'tbody'）。selectAll（'tr'））
.data（tbl_ss564_ib_jsonData）。输入（）
.append（'tr'）；
行。选择全部（'td'）
.数据（功能（d）{
返回标题_ss564_ib.map（函数（k））{
返回{'value'：d[k]，'name'：k}；
});
}).输入（）
.append（'td'））
.attr（'data-th'，函数（d）{
返回d.name；
})
.文本（功能（d）{
返回d值；
});
*{
保证金：0；
填充：0；
}
#ss564_ibu_page_wrap body{
字体：14px/1.4格鲁吉亚，衬线；
}
#ss564_ib_页面_包装{
利润率：20px；
}
p{
利润率：20px0；
}
/* 
通用样式，适用于台式机/笔记本电脑
*/
#ss564_ibu_page_wrap table{
宽度：100%；
边界塌陷：塌陷；
}
/*斑马条纹*/
#ss564_ib_page_wrap tr:n类型（奇数）{
背景：#eee；
}
#ss564_ib_page_wrap th{
背景：水鸭；
字体大小：粗体；
光标：s-调整大小；
背景重复：无重复；
背景位置：3%中心；
}
#ss564_ib_page_wrap td，th{
填充：6px；
边框：1px实心#ccc；
文本对齐：左对齐；
}
#ss564_ib_page_wrap th.des:之后{
内容：“\21E9”；
}
#ss564_ib_page_wrap th.aes:之后{
内容：“\21E7”；
}
在不更改D3代码的情况下，最简单的解决方案就是预先操作数据数组：

tbl_ss564_ib_jsonData[0].DC.forEach(function(d, i) {
    for (var key in d) {
        tbl_ss564_ib_jsonData[0][key] = d[key];
    }
});

delete tbl_ss564_ib_jsonData[0].DC;

以下是更改后的代码：


var tbl\u ss564\u ib\u jsonData=[{
“序号”：“1”，
“SS564指标”：“电力使用效率（PUE）”，
“基线”：“2.2*”，
“DC”：[{
“A”：“2.4”
},
{
“B”：“2.61”
},
{
“C”：“2.46”
},
{
“D”：“2.25”
},
{
“E”：“2.11”
},
{
“F”：“3.75”
},
{
“G”：“2.08”
},
{
“H”：“2.17”
},
{
“I”：“1.85”
},
{
“J”：“2.57”
},
{
“K”：“2.42”
}
]
}];
tbl_ss564_ib_jsonData[0].DC.forEach（函数（d，i）{
for（变量键在d中）{
tbl_ss564_ib_jsonData[0][key]=d[key]；
}
});
删除tbl_ss564_ib_jsonData[0].DC；
var sortAscending=true；
变量tbl_ss564_ib=d3。选择（'ss564_ib_page_wrap'）。追加（'table'）；
var title_ss564_ib=d3.键（tbl_ss564_ib_jsonData[0]）；
var header_ss564_ib=tbl_ss564_ib.append（'thead'）。append（'tr'））
.selectAll（'th'）
.data（title_ss564_ib）.enter（）
.append（'th'）
.文本（功能（d）{
返回d；
})
.on（'点击'）功能（d）{
标题_ss564_ib.attr（'class'，'header'）；
如果（排序）{
行排序（函数（a，b）{
返回b[d]a[d]；
});
sortAscending=true；
this.className='des'；
}
});
var rows=tbl_ss564_ib.append（'tbody'）。selectAll（'tr'））
.data（tbl_ss564_ib_jsonData）。输入（）
.append（'tr'）；
行。选择全部（'td'）
.数据（功能（d）{
返回标题_ss564_ib.map（函数（k））{
返回{
“值”：d[k]，
“名称”：k
};
});
}).输入（）
.append（'td'））
.attr（'data-th'，函数（d）{
返回d.name；
})
.文本（功能（d）{
返回d值；
});
*{
保证金：0；
填充：0；
}
#ss564_ib_页面_包装正文{
字体：14px/1.4格鲁吉亚，衬线；
}
#ss564_ib_页面_包装{
利润率：20px；
}
p{
利润率：20px0；
}
/* 
通用样式，适用于台式机/笔记本电脑
*/
#ss564_ib_页面_包装表{
宽度：100%；
边界塌陷：塌陷；
}
/*斑马条纹*/
#ss564_ib_page_wrap tr:n类型（奇数）{
背景：#eee；
}
#ss564_ibu_页面_wrapth{
背景：水鸭；
字体大小：粗体；
光标：s-调整大小；
背景重复：无重复；
背景位置：3%中心；
}
#ss564_ib_page_wrap td，
th{
填充：6px；
边框：1px实心#ccc；
文本对齐：左对齐；
}
#ss564_ib_page_wrap th.des:之后{
内容：“\21E9”；
}
#ss564_ib_page_wrap th.aes:之后{
内容：“\21E7”；
}

您好，谢谢您的帮助。这正是我需要的。再次，非常感谢。您好，很抱歉打扰您，当我添加第二行时，无法看到该行。非常感谢你的帮助@avamoe这是因为我的函数处理数据数组，就好像它