从 json 数据创建表格视图

Question

I want to create a tabular view from the below json data.

{"data_report":[{"data":[1,2,0,3],"label":"Test1","backgroundColor":"blue"},
            {"data":[3,4,2,5],"label":"test2","backgroundColor":"#a3eaae"},
            {"data":[2,3,1,4],"label":"test3","backgroundColor":"#37bd11"},
            {"data":[1,2,0,3],"label":"test4","backgroundColor":"#43bee3"},
            {"data":[1,2,0,3],"label":"test5","backgroundColor":"#a3eaae"},
            {"data":[0,1,0,2],"label":"test6","backgroundColor":"#1195bd"},
            {"data":[0,1,0,2],"label":"test7","backgroundColor":"#aeb5b7"},
            {"data":[1,2,0,3],"label":"test8","backgroundColor":"pink"}] ,
  "weeks":["Week 1 ","Week 2 ","Week 3 ","Week 4 "]
}  

From the above json I have to create table as

IS it possible to parse the data as form as table using json.stringfy

Answer 1

 const input = { "data_report": [{ "data": [1, 2, 0, 3], "label": "Test1", "backgroundColor": "blue" }, { "data": [3, 4, 2, 5], "label": "test2", "backgroundColor": "#a3eaae" }, { "data": [2, 3, 1, 4], "label": "test3", "backgroundColor": "#37bd11" }, { "data": [1, 2, 0, 3], "label": "test4", "backgroundColor": "#43bee3" }, { "data": [1, 2, 0, 3], "label": "test5", "backgroundColor": "#a3eaae" }, { "data": [0, 1, 0, 2], "label": "test6", "backgroundColor": "#1195bd" }, { "data": [0, 1, 0, 2], "label": "test7", "backgroundColor": "#aeb5b7" }, { "data": [1, 2, 0, 3], "label": "test8", "backgroundColor": "pink" } ], "weeks": ["Week 1 ", "Week 2 ", "Week 3 ", "Week 4 "] } let thString = input.weeks.reduce((res, h) => res + '<th>' + h + '</th>', "<th></th>"); $('#thead').html(thString); let sum = [0, 0, 0, 0]; input.data_report.forEach(tr => { let trString = "<td>" + tr.label + "</td>"; tr.data.forEach((val, index) => { trString += '<td>' + val + '</td>'; sum[index] += val; }) $('#tbody').append("<tr>" + trString + "</tr>"); }); const resultRow = sum.reduce((res, val) => res + '<td class="text-bold">'+val+'</td>', '<td>Total</td>') $('#tbody').append(resultRow);

 table, tr, td, th { border: 1px solid #333; border-collapse: collapse; } td { padding: 0 4px; text-align: right; }.text-bold { font-weight: 600; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <thead id="thead"></thead> <tbody id="tbody"></tbody> </table>