JavaScript如何获取API返回全部数据？循环仅返回最后一场比赛问题

循环仅返回最后一场比赛的原因 #

你在循环中使用 gameInfo = ... 直接赋值，每次循环都会覆盖之前存储的内容，循环结束后自然只剩下最后一次循环生成的比赛信息。

解决方法：累加所有比赛信息 #

方法1：修改循环赋值逻辑 #

将赋值操作从 = 改为 +=，同时添加合适的分隔符（比如换行符或HTML换行标签），避免所有信息挤在一起：

export function getMatchData() {
  return fetch('https://stryk.herokuapp.com/strycket2022')
    .then(function (response) {
      return response.json();
    })
    .then(function (data) {
      let gameArray = data.playedGames;
      let gameInfo = "";

      for (let i = 0; i < gameArray.length; i++) {
        // 用+=累加内容，添加换行符分隔每场比赛
        gameInfo += data.playedGames[i].teams[1].name + " VS " + data.playedGames[i].teams[2].name + "\n";
      }
      console.log(gameInfo);
      return gameInfo;
    });
}

方法2：使用数组 map + join（更优雅） #

通过map遍历所有比赛生成字符串数组，再用join合并成完整内容，这种方式更符合现代JS写法：

export function getMatchData() {
  return fetch('https://stryk.herokuapp.com/strycket2022')
    .then(function (response) {
      return response.json();
    })
    .then(function (data) {
      const gameInfo = data.playedGames.map(game => {
        return `${game.teams[1].name} VS ${game.teams[2].name}`;
      }).join('\n'); // 如果是插入HTML，可替换为'<br>'

      console.log(gameInfo);
      return gameInfo;
    });
}

获取API返回的所有值 #

1. 查看完整返回结构：先在控制台打印整个data对象，明确API返回的所有字段：

console.log(data);

2. 提取所有比赛的完整信息：如果需要每场比赛的更多数据（比如比分、日期等），可以遍历playedGames时提取所有需要的字段：

const allMatchDetails = data.playedGames.map(game => {
  return {
    球队1: game.teams[1].name,
    球队1得分: game.scores[1],
    球队2得分: game.scores[2],
    球队2: game.teams[2].name,
    比赛日期: game.date
  };
});
console.log(allMatchDetails);

3. 插入到HTML表格：如果要把数据插入页面表格，直接生成表格行的HTML代码，再插入到DOM中：

export function getMatchData() {
  return fetch('https://stryk.herokuapp.com/strycket2022')
    .then(function (response) {
      return response.json();
    })
    .then(function (data) {
      // 生成所有表格行
      const tableRows = data.playedGames.map(game => {
        return `<tr>
          <td>${game.teams[1].name}</td>
          <td>${game.scores[1]}</td>
          <td>${game.scores[2]}</td>
          <td>${game.teams[2].name}</td>
        </tr>`;
      }).join('');
      
      // 插入到页面的表格tbody中（假设表格id为match-table）
      document.querySelector('#match-table tbody').innerHTML = tableRows;
    });
}

内容的提问来源于stack exchange，提问作者Lukas E