[英]I am trying to loop through an array of objects and populate them to a table
Question 1 - So I am trying to do just a simple loop through my json array and create a new row for each of the objects in the array. 问题1-所以我试图通过json数组做一个简单的循环,并为数组中的每个对象创建一个新行。 For some reason I can't figure out, it is only printing the last object of the array to the DOM. 由于某种原因,我不知道,它只是将数组的最后一个对象打印到DOM。 So I know I have everything connected right, I just don't know why only the one object is showing up. 所以我知道我已正确连接了所有东西,但我只是不知道为什么只显示一个对象。
I know there are other posts similiar to this all over the internet, I just am having trouble figuring out my exact problem. 我知道在互联网上还有其他与此类似的帖子,我只是很难弄清楚我的确切问题。
Question 2 - I get the error 问题2-我收到错误
"cannot read property insertRow of undefined" “无法读取未定义的属性insertRow”
in the console if I try to put the initial var row = table.insertRow(-1);
在控制台中,如果我尝试将初始var row = table.insertRow(-1);
inside my function, but I don't get the error if it's outside my function. 在函数内部,但如果在函数外部,则不会收到错误。 I thought if it was inside the GenerateTable() then my function would be still be able to access it? 我以为如果在GenerateTable()内部,那么我的函数仍然可以访问它?
var table_data = [{ first_name: 'Zoe', last_name: 'Heriot', home: 'Space Station W3' }, { first_name: 'Jo', last_name: 'Grant', home: 'Earth' }, { first_name: 'Clara', last_name: 'Oswald', home: 'Earth' }, { first_name: 'Adric', last_name: null, home: 'Alzarius' }, { first_name: 'Susan', last_name: 'Foreman', home: 'Gallifrey' }]; var row = table.insertRow(-1); function GenerateTable() { var table = document.getElementById('table')[1]; for (var i = 0; i <= table_data.length; i++) { var firstName = table_data[i].first_name; var lastName = table_data[i].last_name; var home = table_data[i].home; row.innerHTML = ` <td>${firstName}</td> <td>${lastName}</td> <td>${home}</td> `; }; }; if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") { GenerateTable(); } else { document.addEventListener('DOMContentLoaded', GenerateTable); }
<table id="table"> <tr> <th>First Name</th> <th>Last Name</th> <th>Home</th> </tr> </table>
Question 1: 问题1:
row.innerHTML = `
<td>${firstName}</td>
<td>${lastName}</td>
<td>${home}</td>
`;
Is saying "remove everything in row.innerHTML
and replace with <td>$...
. And since the row
value never change, you'll always write to the same row. 就是说“删除row.innerHTML
中的所有row.innerHTML
并替换为<td>$...
并且由于row
值永不改变,因此您将始终写入同一行。
Question 2: 问题2:
Have you tried to put table.insertRow()
after the table
var definition and remove the [1]
? 您是否尝试过将table.insertRow()
放在table
var定义之后并删除[1]
? Like: 喜欢:
var table = document.getElementById('table');
var row = table.insertRow(-1);
You can read more about insertRow
and how it can be used at Mozilla Developer pages . 您可以在Mozilla开发人员页面上阅读有关insertRow
以及如何使用它的更多信息。
A few things: 一些东西:
You can't access a variable before you define it. 在定义变量之前,您无法访问它。 The first line of your script does this, which is why you get the error: 脚本的第一行执行此操作,这就是为什么出现错误的原因:
var row = table.insertRow(-1);
table
isn't defined until inside the function, so you can't use it until you've told javascript what it is. 直到在函数内部才定义table
,所以直到告诉javascript它是什么之前您不能使用它。 Additionally you want to add a row for each trip through the loop, so you need to put the insertRow()
call inside the loop where it will add a row each time. 此外,您还希望为循环中的每次行程添加一行,因此您需要将insertRow()
调用放入循环中,该循环将在每次添加一行。
Also, i the loop you want to stop when i < table_data.length
not <=
otherwise it will throw an error on the last trip through. 另外,当i < table_data.length
not <=
时, i < table_data.length
要停止的循环将在最后一次旅行中引发错误。
Here's a working snippet: 这是一个工作片段:
var table_data =[{ first_name : 'Zoe', last_name : 'Heriot', home : 'Space Station W3'}, { first_name : 'Jo', last_name : 'Grant', home : 'Earth'}, { first_name : 'Clara', last_name : 'Oswald', home : 'Earth'}, { first_name : 'Adric', last_name : null, home : 'Alzarius'}, { first_name : 'Susan', last_name : 'Foreman', home : 'Gallifrey'} ]; function GenerateTable(){ var table = document.getElementById('table'); for (var i=0; i < table_data.length; i++) { var row = table.insertRow(-1); var firstName = table_data[i].first_name; var lastName = table_data[i].last_name; var home = table_data[i].home; row.innerHTML = ` <td>${firstName}</td> <td>${lastName}</td> <td>${home}</td> `; }; }; GenerateTable()
tr:nth-child(even) { background: #ccdced; } td, th { padding:.5em }
<table id="table"> <tr> <th>First Name</th> <th>Last Name</th> <th>Home</th> </tr> </table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.