繁体   English   中英

将 JSON 字符串转换为 JavaScript 对象,然后创建一个 HTML 表

[英]convert the JSON string to a JavaScript object then create a HTML table

我需要一些有关 JSON 字符串操作的帮助。 我想做的是将 JSON 字符串转换为 JavaScript 对象并使 HTML 文件如下所示。 我做的第一件事是使用var obj = JSON.parse ( jsonstring ); 将 JSON 字符串放入 JavaScript 对象。 之后,我希望使用 for 循环遍历 JavaScript 对象中的所有属性,然后使用该值创建表。 但是,我无法通过使用.name获取投票、姓名、种族性别名称而不是其值。 回路控制也出现故障。 .length总是返回一些未定义的错误。 如果您能提供任何帮助,我将不胜感激。 期待您的回音。

哪个角色最好看?

角色:星球大战角色

记录编号:2

感官:在此处输入图像描述


| 投票 | 姓名 | 种族| 性别 |


| 34411224 | 欧比旺·克诺比 | 人类 | 男 |


| 34458794 | 阿纳金天行者 | 人类 | 男 |


在此处输入代码

 var obj = JSON.parse ( jsonstring ); var labelsName = obj.labels[0]; var sensesName = obj.senses[0]; createTable(obj) function createTable(obj) { var table = document.createElement("table"); table.setAttribute("width","100%"); table.setAttribute("border","1"); table.borderColor="#FFFFFF"; table.cellSpacing="0"; table.cellpadding="0"; table.borderColorDark="#FFFFFF"; table.borderColorLight="#AAAAAA"; parentTd = document.getElementById("parentTd"); //console.log(" parentTd=", parentTd); parentTd.appendChild(table); var header = table.createTHead(); header.bgColor="#EEEEEE"; var headerrow = header.insertRow(0); headerrow.height="27"; var labels = var.getElementsByTagName("labels"); var senses = var.getElementsByTagName("senses"); for( var i = 0; i < obj.length; i++ ) { var rowObj = obj[i]; for( var key in rowObj){ console.log(" key =: ", key); console.log(" rowObj[key] =: ", rowObj[key]); } }
 <html> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta content="utf-8" http-equiv="encoding"> <body> <h1>Which Character Is The Best?</h1> <div valign="top" id="parentTd">&nbsp;</div> <script> var jsonstring = ' { "labels": [ ' + '{ "Characters": "StarWarsCharacters", "Record No.": 2, '+ ' "Senses": [ { "vote": 34411224, "name": "Obi-Wan Kenobi", "race": "Human", "gender": "Male"}, ' + ' { "vote": 34458794, "name": "Anakin Skywalker", "race": "Human", "gender": "Male"} ] } ] }' </script> </body> </html>

这是您可以执行的操作的示例:

for (var i = 0; i < json.labels.length; i++){
    for (var j = 0; j < json.labels[i].Senses.length; j++){
        document.getElementById('table').innerHTML += 
               '<tr><td>' + json.labels[i].Senses[j].gender + 
               '</td><td>' + json.labels[i].Senses[j].name + 
               '</td><td>' + json.labels[i].Senses[j].race + 
               '</td><td>'+ json.labels[i].Senses[j].vote + 
               '</td></tr>';   
   }    
}

也许您可以尝试使用以下方法动态添加标题:

console.log(Object.keys(json.labels[0].Senses[0])); 

它返回一个数组:

[ "vote", "name", "race", "gender" ]

小提琴

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM