Question

我正在尝试读取json数据并将其导入到html中的表中。但是它有些不起作用。

我已经实现了一个函数来输入效果很好的数据。

只有加载json数据的函数不起作用。

但我真的不知道为什么。

我发布了整个HTML代码和我的加载数据功能。我的Javascript代码：

function loadData() {

var text = '{"employees":[' +
'{"firstName":"Ben","lastName":"dsafsad" },' +
'{"firstName":"Peter","lastName":"dsdsaadsj" },' +
'{"firstName":"Jules","lastName":"MIAU" }]}';

obj = JSON.parse(text);

for (var i = 0; i < obj.length; i++) {     
var currentObj = obj[i];
var myName = currentObj.employees[0].firstName;
var age = currentObj.employees[0].lastName;
var table = document.getElementById("myTableData");

var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML= '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">';
row.insertCell(1).innerHTML= myName.value;
row.insertCell(2).innerHTML= age.value;

}
}

我的HTML代码：

<!DOCTYPE html>
<html>
<head>
<title>HTML dynamic table using JavaScript</title>
<script type="text/javascript" src="app.js"></script>
</head>
<body onload="load()">
<div id="myform">
<b>Simple form with name and age ...</b>
<table>
<tr>
    <td>Name:</td>
    <td><input type="text" id="name"></td>
</tr>
<tr>
    <td>Age:</td>
    <td><input type="text" id="age">
    <input type="button" id="add" value="Add" onclick="Javascript:addRow()">
    <input type="button" id="add" value="Load Data" onclick="Javascript:loadData()"></td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>
</table>
</div>
<div id="mydata">
<b>Current data in the system ...</b>
<table id="myTableData"  border="1" cellpadding="2">
<tr>
    <td>&nbsp;</td>
    <td><b>Name</b></td>
    <td><b>Age</b></td>
</tr>
</table>
&nbsp;<br/>
</div>
</body>
</html>

Answer 1

你应该迭代obj.employees，而不是obj。您有一个对象，它由employees数组组成（在您的示例中长度为3）。

  obj = JSON.parse(text);
  console.log(obj);
  console.log(obj.length);  //this returns undefined
  console.log(obj.employees.length); //this is what you want
  for (var i = 0; i < obj.employees.length; i++) {
    var currentObj = obj.employees[i];
    console.log(currentObj);
    var myName = currentObj.firstName;
    console.log(myName);
    var age = currentObj.lastName;
    console.log(age);
  }

Fiddle demo

你这里也有问题：

row.insertCell(1).innerHTML= myName.value;
row.insertCell(2).innerHTML= age.value;

myName和age是您定义的变量，而不是html元素，因此，它们没有value属性。您只需要参考变量本身，如下所示：

row.insertCell(1).innerHTML= myName;
row.insertCell(2).innerHTML= age;

Update Fiddle Demo

阅读json并创建表javascript

1 个答案: