洛丁山奈 2017-06-02 03:12 采纳率: 33.3%
浏览 3170
已采纳

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怎么解析成表格?求代码
  • 写回答

7条回答 默认 最新

  • 全栈极简 博客专家认证 2017-06-02 03:34
    关注
     <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>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(6条)

报告相同问题?

悬赏问题

  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 C#调用python代码(python带有库)
  • ¥15 矩阵加法的规则是两个矩阵中对应位置的数的绝对值进行加和
  • ¥15 活动选择题。最多可以参加几个项目?
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)
  • ¥20 怎么在stm32门禁成品上增加查询记录功能
  • ¥15 Source insight编写代码后使用CCS5.2版本import之后,代码跳到注释行里面