Javascript - forEach 不是函数 API

问题描述

我在 javascript 中使用 API 使用 fetch 获取数据并将其放入表中，但我不断收到类型错误，指出 .forEach 不是函数。

下面我粘贴了我的 HTML 和 JavaScript。

HTML：

    <table>
      <thead>
        <tr>
          <th>Player Name</th>
          <th>Position</th>
          <th>Nationality</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>

JavaScript：

// Personal API Key
var apiKey = '⟨the key⟩';

function requestLeagueTable() {
  fetch('https://api.football-data.org/v2/competitions/PL/scorers',{
      headers: {
        'X-Auth-Token': apiKey,}
    })
    .then((response) => response.json())
    .then((data) => {
      console.log('Data :',data);
      createTable(data);
    })
    .catch((error) => {
      console.error('Error:',error);
    });
}

// create the table
function createTable(data) {
  var players = data.scorers[0].player;
  var teams = data.scorers[0].team;
  var goals = data.scorers[0].numberOfGoals;

  players.forEach(createTeam);
  teams.forEach(createTeam);
  goals.forEach(createTeam);
}

function createTeam(player,team,goal) {
  // create an element for each element
  var teamElement = document.createElement("tr");

  // add each individual piece of data
  addTeamData(player.name,teamElement);
  addTeamData(team.name,teamElement);
  addTeamData(player.position,teamElement);
  addTeamData(player.nationality,teamElement);
  addTeamData(goal,teamElement);

  // add the team to the page
  var tableElement = document.querySelector("tbody");
  tableElement.appendChild(teamElement);
}

// add each individual piece of team data
function addTeamData(data,element) {
  var td = document.createElement("td");
  td.textContent = data;
  element.appendChild(td);
}

// update on page load
requestLeagueTable();

如果你能帮助我，那将是非常有益的。

非常感谢

解决方法

您正在尝试执行 forEach：

 var goals = data.scorers[0].numberOfGoals;

所以 goals 不是数组，所以你不能对它做 forEach。

,

我的做法是这样的：

function createTable(data) {
data.scorers.forEach(({player,team,numberOfGoals}) => createTeam(player,numberOfGoals));
}