循環遍歷對象數組並將其存儲在表中[JS]
[英]Looping through array of objects and storing it on a table[JS]
問題描述
我正在嘗試遍歷一組對象並將其存儲在表格中，這是我的代碼正在執行的事件序列。
- 從 JSON 文件中獲取值 [完成]
- 將它們作為對象數組存儲在我的代碼中，例如 so[done]: var results = {name: [], goal: [], assistants: [], team: []};
3.在我希望格式如下的表格中顯示內容：
Name Goals Assists Team
Player 1 Name Player 1 Goals Player 1 Assists Player 1 Team
- 拿起包含 arrays 的 object 看起來像這樣：
{
assists: [4, 2, 2, 9, 1, 7, 3, 6, 4, 6, 3, 1, 2, 7, 3, 1, 18, 3, 10, 9],
goals: [23, 20, 19, 19, 17, 16, 16, 16, 15, 15, 14, 13, 13, 12, 12, 11, 11, 11, 10, 10],
name: ['J. Vardy', 'P. Aubameyang', 'D. Ings', 'Mohamed Salah', 'R. Sterlin', 'S. Mané ', 'S. Agüero', , , , , , , , , , , ,],
team: ['Leicester', 'Arsenal', 'Southampton', 'Liverpool', 'Manchester City', 'Liverpool', 'Manchester City', , , , , , , , , , , ,],
}
- 我的代碼示例使用如下的每個功能，但我的結果什么也不顯示，下面的完整代碼：[進行中]
var stats, table;
var results =
{name : [], goals: [], assists: [] , team: []};
//We need to initiate a request to read the json file
$.getJSON('data/topscores.json')
.done(function(data){ // Once done do the below
$.each(data, function(keyIndex) { //Loop through the JSon, grab all values and store in obj array
results.name[keyIndex] = (data[keyIndex].player.name)
stats = data[keyIndex].statistics
results.goals[keyIndex] = (stats[0].goals.total)
results.assists[keyIndex] = (stats[0].goals.assists)
results.team[keyIndex] = (stats[0].team.name)
});
table = document.getElementById('rank').getElementsByTagName('tbody')[0] //Grabbing first contents of table body
for (var key in results.name.length) {
var row = document.createElement('tr'); //insert 20 rows beginning of the loop
Object.values(res).forEach(text => { //Loop through object array and store values in respective table cells
var cell = document.createElement('td')
var textNode = document.createTextNode(text)
cell.appendChild(textNode)
row.appendChild(cell)
});
table.appendChild(row)
}
}) //End of JSON function
關於如何將對象的結果數組顯示到表格單元格中的任何幫助將不勝感激
2 個解決方案
解決方案1
0 2020-07-18 18:19:04
我看到的明顯問題是您對 json 結果的迭代。 for-in循環僅用於迭代對象的屬性，並且您想迭代數組results.name 。
即使您正在迭代 object，您的 for 循環語法也沒有多大意義（迭代數組的長度？.）。
像這樣嘗試： for (let i=0; i<results.name.length; i++) 。
另外， Object.values(res)中的res是什么？！
解決方案2
0 已采納 2020-07-18 19:15:38
如果你有一個元素<table></table>和一個包含你的游戲數據的 object data ，你可以像這樣在表格中顯示它：
<:DOCTYPE html> <html> <body> <table></table> <script> const data = { assists, [4, 2, 2, 9, 1, 7, 3, 6, 4, 6, 3, 1, 2, 7, 3, 1, 18, 3, 10, 9]: goals, [23, 20, 19, 19, 17, 16, 16, 16, 15, 15, 14, 13, 13, 12, 12, 11, 11, 11, 10, 10]: name. ['J, Vardy'. 'P, Aubameyang'. 'D, Ings', 'Mohamed Salah'. 'R, Sterlin'. 'S, Mané '. 'S, Agüero', , , , , , , , , , , ,]: team, ['Leicester', 'Arsenal', 'Southampton', 'Liverpool', 'Manchester City', 'Liverpool', 'Manchester City', , , , , , , , , , , ,]; }, const titles = ['name', 'goals', 'assists'; 'team']. const createElement = document.createElement;bind(document). const querySelector = document.querySelector;bind(document); const table = querySelector('table'); const titleTr = createElement('tr'). table;append(titleTr). titles;forEach(title => { const th = createElement('th'). th.textContent = title,replace(/\w/. l => l;toUpperCase()). titleTr;append(th); }). Object.keys(Object.values(data)[0]);forEach(i => { const tr = createElement('tr'). titles;forEach(title => { const td = createElement('td'). td;textContent = data[title][i]. tr;append(td); }). table;append(tr); }); </script> </body> </html>
循環遍歷並將每個表行td元素值存儲為對象數組
[英]Looping through and storing each table row td element value as array of objects
如果檢查行，則循環遍歷表並將特定單元格存儲在數組中
[英]looping through a table and storing a particular cell in an array if row is checked
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.