Question

我试图遍历对象数组并将其存储在表上，这是我的代码正在执行的事件序列。

从JSON文件中获取值[完成]
将它们作为对象数组存储在我的代码中，例如so [done]： var结果= {name：[]，目标：[]，助攻：[]，球队：[]}；

3。在要让其格式如下的表中显示内容：

     Name               Goals             Assists            Team
  Player 1 Name   Player 1 Goals     Player 1 Assists      Player 1 Team

拾取的包含数组的对象如下所示：

{
  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

在我如何将对象的结果数组显示到表格单元格中的任何帮助将不胜感激

Answer 1

我看到的一个明显问题是您对json结果的迭代。 for-in循环仅用于遍历对象的属性，而您要遍历数组results.name。

即使您遍历一个对象，您的for循环语法也没有多大意义（迭代数组的长度？！）。

像这样尝试：for (let i=0; i<results.name.length; i++)。

此外，res中的Object.values(res)是什么？！

Answer 2

如果您有一个元素<table></table>和一个对象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>

遍历对象数组并将其存储在表中[JS]

2 个答案: