如何解决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));
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。