Json:json数据自动转换表格table
传入需要渲染的数据render,自动提取JSON数据中的属性变成表格列标题,JSON某个属性的值作为表格数据。
参考链接:https://blog.csdn.net/qq_33745102/article/details/89491674
// EXTRACT VALUE FOR HTML HEADER. var converter=function (render) { //生成各个列 var col = []; for (var i = 0; i < render.length; i++) { for (var key in render[i]) { if (col.indexOf(key) === -1) { col.push(key); } } } console.log(col); //create a table var table = document.createElement("table"); var tr = table.insertRow(-1); // TABLE ROW. for (var i = 0; i < col.length; i++) { var th = document.createElement("th"); // TABLE HEADER. th.innerHTML = col[i]; tr.appendChild(th); } // ADD JSON DATA TO THE TABLE AS ROWS. for (var i = 0; i < render.length; i++) { tr = table.insertRow(-1); for (var j = 0; j < col.length; j++) { var tabCell = tr.insertCell(-1); tabCell.innerHTML = render[i][col[j]]; } } // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER. var divContainer = document.getElementById("viewport"); divContainer.innerHTML = ""; divContainer.appendChild(table); return col.length; }
参考2:https://www.jianshu.com/p/c83a1e5f2437
通常返回的json中会键名是英文的,显示的时候可能需要转换为中文。这种情况可以再后台ajax返回的时候多传一个键名和对应中文名映射数据。
https://gitee.com/run27017/nested-json-to-table
一个将JSON数据转化为各种表格显示的工具,支持复杂的嵌套格式,嵌套的JSON会以合并单元格的方式显示。