API数组对象无法在函数中展示，但console.log正常输出问题

你的核心问题是platforms()函数没有返回值，所以在模板字符串中调用它时得到的是undefined，自然无法渲染出内容。虽然循环里的console.log能打印出正确值，但单独的platform[i].platform.name只是一个孤立的表达式，不会产生任何可被DOM使用的返回结果。

修复方案 #

修改platforms函数，让它收集所有平台名称并返回一个可直接插入DOM的字符串：

function displayGameDetails(details) {
  function platforms() {
    // 遍历数组提取平台名称，再用分隔符拼接成字符串
    return details.platforms.map(item => item.platform.name).join(', ');
  }

  resultGrid.innerHTML = `
  <div class="box">
      <p class="fourPara">${platforms()}</p>
  </div>
  `;
}

为什么这样可行？ #

• map方法遍历details.platforms数组，提取每个元素的platform.name，生成新的字符串数组（比如["PC", "macOS", "PlayStation"]）
• join(', ')把数组元素用逗号加空格连接成完整字符串，插入模板后就能正常显示所有平台名称

如果更习惯用for循环，也可以这样写：

function platforms() {
  let platformNames = [];
  for (let i = 0; i < details.platforms.length; i++) {
    platformNames.push(details.platforms[i].platform.name);
  }
  return platformNames.join(', ');
}

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