如何在表头和行中显示嵌套的JSON值

Question

I would like to show the nested JSON values in table header and row as per screenshot.

However, my current code show me as per below.

How can I get the result of the first screenshot?

Here is my code:

 var tbl_ss564_ib_jsonData = [ { "S_No": "1", "SS564 Metric": "Power Usage Effectiveness(PUE)", "Baseline": "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; var tbl_ss564_ib = d3.select('#ss564_ib_page_wrap').append('table'); var title_ss564_ib = d3.keys(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') .text(function (d) { return d; }) .on('click', function (d) { header_ss564_ib.attr('class', 'header'); if (sortAscending) { rows.sort(function(a, b) { return b[d] < a[d]; }); sortAscending = false; this.className = 'aes'; } else { rows.sort(function(a, b) { return b[d] > a[d]; }); sortAscending = true; this.className = 'des'; } }); var rows = tbl_ss564_ib.append('tbody').selectAll('tr') .data(tbl_ss564_ib_jsonData).enter() .append('tr'); rows.selectAll('td') .data(function (d) { return title_ss564_ib.map(function (k) { return { 'value': d[k], 'name': k}; }); }).enter() .append('td') .attr('data-th', function (d) { return d.name; }) .text(function (d) { return d.value; }); 

 * { margin: 0; padding: 0; } #ss564_ib_page_wrap body { font: 14px/1.4 Georgia, Serif; } #ss564_ib_page_wrap { margin: 20px; } p { margin: 20px 0; } /* Generic Styling, for Desktops/Laptops */ #ss564_ib_page_wrap table { width: 100%; border-collapse: collapse; } /* Zebra striping */ #ss564_ib_page_wrap tr:nth-of-type(odd) { background: #eee; } #ss564_ib_page_wrap th { background: Teal; font-weight: bold; cursor: s-resize; background-repeat: no-repeat; background-position: 3% center; } #ss564_ib_page_wrap td, th { padding: 6px; border: 1px solid #ccc; text-align: left; } #ss564_ib_page_wrap th.des:after { content: "\\21E9"; } #ss564_ib_page_wrap th.aes:after { content: "\\21E7"; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <div id="ss564_ib_page_wrap"> </div> 

Answer 1

Without changing your D3 code, the easiest solution is just manipulating your data array beforehand:

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;

Here is your code with that change:

 var tbl_ss564_ib_jsonData = [{ "S_No": "1", "SS564 Metric": "Power Usage Effectiveness(PUE)", "Baseline": "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(function(d, i) { for (var key in d) { tbl_ss564_ib_jsonData[0][key] = d[key]; } }); delete tbl_ss564_ib_jsonData[0].DC; var sortAscending = true; var tbl_ss564_ib = d3.select('#ss564_ib_page_wrap').append('table'); var title_ss564_ib = d3.keys(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') .text(function(d) { return d; }) .on('click', function(d) { header_ss564_ib.attr('class', 'header'); if (sortAscending) { rows.sort(function(a, b) { return b[d] < a[d]; }); sortAscending = false; this.className = 'aes'; } else { rows.sort(function(a, b) { return b[d] > a[d]; }); sortAscending = true; this.className = 'des'; } }); var rows = tbl_ss564_ib.append('tbody').selectAll('tr') .data(tbl_ss564_ib_jsonData).enter() .append('tr'); rows.selectAll('td') .data(function(d) { return title_ss564_ib.map(function(k) { return { 'value': d[k], 'name': k }; }); }).enter() .append('td') .attr('data-th', function(d) { return d.name; }) .text(function(d) { return d.value; }); 

 * { margin: 0; padding: 0; } #ss564_ib_page_wrap body { font: 14px/1.4 Georgia, Serif; } #ss564_ib_page_wrap { margin: 20px; } p { margin: 20px 0; } /* Generic Styling, for Desktops/Laptops */ #ss564_ib_page_wrap table { width: 100%; border-collapse: collapse; } /* Zebra striping */ #ss564_ib_page_wrap tr:nth-of-type(odd) { background: #eee; } #ss564_ib_page_wrap th { background: Teal; font-weight: bold; cursor: s-resize; background-repeat: no-repeat; background-position: 3% center; } #ss564_ib_page_wrap td, th { padding: 6px; border: 1px solid #ccc; text-align: left; } #ss564_ib_page_wrap th.des:after { content: "\\21E9"; } #ss564_ib_page_wrap th.aes:after { content: "\\21E7"; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <div id="ss564_ib_page_wrap"> </div>