[英]creating table from json data
I have some JSON data which I want to create a table from it but I am getting this error from the console: TypeError: obj.labels[i].getAttribute is not a function
. 我有一些JSON数据,我想从中创建一个表,但从控制台收到此错误: TypeError: obj.labels[i].getAttribute is not a function
。 creating the table header is okay, I only get the error when I try to populate the table with data. 创建表头是可以的,只有在尝试用数据填充表时才会出现错误。
I want the car table to have the header [id, carname, year, registration]
我希望汽车表具有标题[id, carname, year, registration]
The error is coming from this line: span.innerText = obj.labels[i].getAttribute(attrs[j]);
错误来自此行: span.innerText = obj.labels[i].getAttribute(attrs[j]);
I don't know why I am getting the error, I need some help extracting the car data and populate the table. 我不知道为什么会收到错误消息,我需要一些帮助来提取汽车数据并填充表格。
var attrs = ["id", "name", "year", "registration"]; var jsonString = '{\\n' + ' "labels": [\\n' + ' {\\n' + ' "name": "test",\\n' + ' "age": 33,\\n' + ' "contact": test,\\n' + ' "cars": [\\n' + ' {"id": 2222, "carname": "ford", "year": 2000, "registration": cd60}\\n' + ' {"id": 3333, "carname": "BMW", "year": 2012, "registration": fs41}\\n' + ' ]\\n' + ' }\\n' + ' ]\\n' + '}\\n' + ''; var obj = JSON.parse(jsonString); //create table var myTableDiv = document.getElementById("mytable") var table = document.createElement('table'); var tableBody = document.createElement('tbody'); table.appendChild(tableBody); //header for (var i = 0; i < obj.labels.length; i++) { var tr = document.createElement('tr'); for (var j = 0; j < attrs.length; j++) { var td = document.createElement('th'); td.width = '75'; var span = document.createElement("span"); span.innerText = attrs[j]; td.appendChild(span); tr.appendChild(td); } tableBody.appendChild(tr); } //body for (var i = 0; i < obj.labels.length; i++) { var tr = document.createElement('tr'); for (var j = 0; j < attrs.length; j++) { var td = document.createElement('td'); td.width = '75'; var span = document.createElement("span"); span.innerText = obj.labels[i].getAttribute(attrs[j]); td.appendChild(span); tr.appendChild(td); } tableBody.appendChild(tr); } myTableDiv.appendChild(table)
If I understand your question correctly you want to display car details in a HTML table. 如果我正确理解了您的问题,则希望在HTML表格中显示汽车详细信息。 Your input JSON data structure is as follows: 您输入的JSON数据结构如下:
labels
has a set of objects (let's say each of these is label
) labels
具有一组对象(假设每个对象都是label
) cars
每个标签都有属性和一组cars
car
has properties car
都有属性 To access car details your code will like: 要访问汽车详细信息,您的代码将如下所示:
var attrs = ["id", "carname", "year", "registration"];
var jsonString =
'{\n' +
' "labels": [\n' +
' {\n' +
' "name": "test",\n' +
' "age": 33,\n' +
' "contact": "test",\n' +
' "cars": [\n' +
' {"id": 2222, "carname": "ford", "year": 2000, "registration": "cd60"},\n' +
' {"id": 3333, "carname": "BMW", "year": 2012, "registration": "fs41"}\n' +
' ]\n' +
' }\n' +
' ]\n' +
'}\n' +
'';
var obj = JSON.parse(jsonString);
console.log(obj)
for (var i = 0; i < obj.labels.length; i++) {
for (var j = 0; j < obj.labels[i]['cars'].length; j++) {
for (var k = 0; k < attrs.length; k++) {
console.log(obj.labels[0]['cars'][j][attrs[k]])
}
console.log("=========")
}
}
Edit 编辑
The above iteration may look like very basic. 上面的迭代看起来很基础。 Here are the short forms of the above for loop: 以下是上述for循环的简短形式:
If you want to refer to attrs
to read car attributes: 如果要引用attrs
来读取汽车属性:
[...obj.labels].forEach(element => {
element['cars'].forEach(car => {
for (var i = 0; i < attrs.length; i++) {
console.log(car[attrs[i]]);
}
});
});
If you want to read all car attributes: 如果要阅读所有汽车属性:
[...obj.labels].forEach(element => {
element['cars'].forEach(car => Object.keys(car).map(attr =>
console.log(attr + " " + car[attr])));
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.