Question

我需要一些JSON字符串操作方面的帮助。我想要做的是将JSON字符串转换为JavaScript对象，并使HTML文件如下所示。我要做的第一件事是使用 var obj = JSON.parse（jsonstring）; 将JSON字符串放到JavaScript对象中。之后，我希望使用for循环来遍历JavaScript对象中的所有属性，然后使用创建表的值。但是，我没有获得 投票，名称，种族 和性别等的名称，而不是其价值使用 .name 。回路控制也出现故障。 .length 始终返回一些undefine错误。我将非常感谢您提供的任何帮助。期待收到你的回复。

哪个角色最好？

字符：StarWarsCharacters

记录编号：2

感觉： enter image description here

|投票|名字|比赛|性别|

| 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>

Answer 1

以下是您可以执行的操作示例：

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" ]

Fiddle

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

1 个答案: