json字符串在html中，怎么转换成表格展示？

{
"response":{
"numFound":"2",
"start":"0",
"docs":[
{
"id":"857400f2-b680-4de1-b9d1-5ea107f6f362",
"agentId":"ServicePlatform_Infrastructure_CPU-Usage",
"category":"Infrastructure",
"subCategory":"CPU-Usage",
"thirdCategory":"N/A",
"dataAcquistionTime":"1496332066849",
"optional":"",
"label":"CPU使用率",
"data":"98%",
"data_i":"98",
"data_f":"0",
"optionData_f":"0",
"option2Label":"",
"option2Data":"",
"option2Data_f":"0",
"option3Label":"",
"option3Data":"",
"option3Data_f":"0",
"seqNo":"0",
"_version_":"1569048833034289200"
}
]
}
}

 这样的json，在html怎么解析成表格？求代码

 <html>
<head>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            var json ="{\"response\": {\"numFound\": \"2\",\"start\": \"0\",\"docs\": [{\"id\": \"857400f2-b680-4de1-b9d1-5ea107f6f362\",\"agentId\": \"ServicePlatform_Infrastructure_CPU-Usage\",\"category\": \"Infrastructure\",\"subCategory\": \"CPU-Usage\",\"thirdCategory\": \"N/A\",\"dataAcquistionTime\": \"1496332066849\",\"optional\": \"\",\"label\": \"CPU使用率\",\"data\": \"98%\",\"data_i\": \"98\",\"data_f\": \"0\",\"optionData_f\": \"0\",\"option2Label\": \"\",\"option2Data\": \"\",\"option2Data_f\": \"0\",\"option3Label\": \"\",\"option3Data\": \"\",\"option3Data_f\": \"0\",\"seqNo\": \"0\",\"_version_\": \"1569048833034289200\"}]}}";

            var elements = JSON.parse(json).response.docs;
            for(var i = 0;i<elements.length;i++){
                $("#tt").append("<tr>");
                $("#tt").append("<td width='5%'>"+elements[i].id+"</td>");
                $("#tt").append("<td width='5%'>"+elements[i].agentId+"</td>");
                $("#tt").append("<td width='5%'>"+elements[i].category+"</td>");
                $("#tt").append("<td width='5%'>"+elements[i].subCategory+"</td>");
                $("#tt").append("<td width='5%'>"+elements[i].thirdCategory+"</td>");
                $("#tt").append("<td width='5%'>"+elements[i].dataAcquistionTime+"</td>");
                $("#tt").append("<td width='5%'>"+elements[i].optional+"</td>");
                $("#tt").append("<td width='5%'>"+elements[i].label+"</td>");
                $("#tt").append("<td width='5%'>"+elements[i].data+"</td>");
                $("#tt").append("<td width='5%'>"+elements[i].data_i+"</td>");
                $("#tt").append("<td width='5%'>"+elements[i].data_f+"</td>");
                $("#tt").append("<td width='5%'>"+elements[i].optionData_f+"</td>");
                $("#tt").append("<td width='5%'>"+elements[i].option2Label+"</td>");
                $("#tt").append("<td width='5%'>"+elements[i].option2Data+"</td>");
                $("#tt").append("<td width='5%'>"+elements[i].option2Data_f+"</td>");
                $("#tt").append("<td width='5%'>"+elements[i].option3Label+"</td>");
                $("#tt").append("<td width='5%'>"+elements[i].option3Data+"</td>");
                $("#tt").append("<td width='5%'>"+elements[i].option3Data_f+"</td>");
                $("#tt").append("<td width='5%'>"+elements[i].seqNo+"</td>");
                $("#tt").append("<td width='5%'>"+elements[i]._version_+"</td>");
                $("#tt").append("</tr>");
            }
        });

    </script>
</head>
<body>
    <table id="tt" border="1" cellspacing="0" cellpadding="0">
    </table>
</body>
</html>

用js 就可以直接解析你这个字符串了

 var obj = JSON.parse(str);  //str 就是你这个字符串 
 obj.docs; // 这就是你所需要的数据的集合了  通过下标取对象 然后属性名取值

先获取到json数据，再把json数据转换成js对象，使用$.each循环，分别把k值和v值写入到表格中就ok了

<!DOCTYPE HTML>



MODEL PAGE table { border: 1px solid black; border-collapse: collapse; } td,th { border: 1px solid black; } var datanav = [ { "id":"857400f2-b680-4de1-b9d1-5ea107f6f362", "agentId":"ServicePlatform_Infrastructure_CPU-Usage", "category":"Infrastructure", "subCategory":"CPU-Usage", "thirdCategory":"N/A", "dataAcquistionTime":"1496332066849", "optional":"", "label":"CPU使用率", "data":"98%", "data_i":"98", "data_f":"0", "optionData_f":"0", "option2Label":"", "option2Data":"", "option2Data_f":"0", "option3Label":"", "option3Data":"", "option3Data_f":"0", "seqNo":"0", "_version_":"1569048833034289200" } ]; window.onload = function () { var table = document.getElementsByTagName ('table')[0]; for ( var i = 0; i < datanav.length; i++) { var tr = table.insertRow (table.rows.length); var obj = datanav[i]; for ( var p in obj) { if (p == 'tenancy') { break; } var td = tr.insertCell (tr.cells.length); td.innerText = obj[p]; } } }


























idagentIdcategorysubCategorythirdCategorydataAcquistionTimeoptionallabeldatadata_idata_foptionData_foption2Labeloption2Dataoption2Data_foption3Labeloption3Dataoption3Data_fseqNoversion


了解一下easyui 和 dataTables 等， 这样的插件

这个要么自己解析成table可用的数据，要么构造成table可用的数据

转成对象eval('(' + json + ')').response.docs，遍历出来

，append到table里