读取json并创建表javascript [英] Read json and create table javascript
问题描述
我正在尝试读取 json 数据并将其导入到我的 html 表格中.但有些方法不起作用.
我已经实现了一个输入数据的功能，效果很好.
只有加载json数据的功能不起作用.
但我真的不知道为什么.
我已经发布了整个 html 代码和我的加载数据功能.我的 Javascript 代码:
function loadData() {var text = '{"员工":[' +'{"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='';row.insertCell(1).innerHTML= myName.value;row.insertCell(2).innerHTML= age.value;}}我的 HTML 代码:
<头><title>使用 JavaScript 的 HTML 动态表</title><script type="text/javascript" src="app.js"></script><body onload="load()"><div id="myform"><b>带有姓名和年龄的简单表格...</b><表格><tr><td>名称:</td><td><input type="text" id="name"></td></tr><tr><td>年龄:</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> </td><td> </td></tr><div id="mydata"><b>系统中的当前数据...</b><table id="myTableData" border="1" cellpadding="2"><tr><td> </td><td><b>姓名</b></td><td><b>年龄</b></td></tr> <br/>
</html>
您应该迭代 obj.employees，而不是 obj.您有一个对象，它由一个员工数组组成(在您的示例中长度为 3).
obj = JSON.parse(text);控制台日志(对象)；console.log(obj.length);//这将返回未定义控制台日志(obj.employees.length)；//这就是你想要的for (var i = 0; i < obj.employees.length; i++) {var currentObj = obj.employees[i];控制台日志(currentObj)；var myName = currentObj.firstName;控制台日志(我的名字)；var age = currentObj.lastName;控制台日志(年龄)；}你这里也有问题:
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= 年龄；I am am trying to read json data and import it to my table in html. But some how it is not working.
I have already implemented a function to type in data what works great.
Only the function to load the json data is not working.
But i really don't know why.
I have posted the whole html code and my load data function. MY Javascript code:
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;
}
}
MY HTML code:
<!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> </td>
<td> </td>
</tr>
</table>
</div>
<div id="mydata">
<b>Current data in the system ...</b>
<table id="myTableData" border="1" cellpadding="2">
<tr>
<td> </td>
<td><b>Name</b></td>
<td><b>Age</b></td>
</tr>
</table>
<br/>
</div>
</body>
</html>
You should be iterating over obj.employees, not obj. You have one object, which is composed of an employees array (with length of 3 in your example).
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);
}
You also have a problem here:
row.insertCell(1).innerHTML= myName.value;
row.insertCell(2).innerHTML= age.value;
myName and age are variables you defined, not html elements, and as such, they don't have a value property. You just need to refer to the variables themselves, like so:
row.insertCell(1).innerHTML= myName;
row.insertCell(2).innerHTML= age;
这篇关于读取json并创建表javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
