循环调用API动态更新HTML元素文本的技术问题求助

• 核心修正点：访问对象的动态属性时，必须使用方括号语法而非点语法，因为symbolName是变量，不是固定的属性名
• 循环中动态获取DOM元素时，确保选择器拼接正确，同时处理好API调用的异步逻辑

以下是修正后的完整代码示例：

// 假设已获取到四个随机加密货币的标识数组，示例：symbols = ["BTC", "ETH", "BNB", "SOL"]
const symbols = ["BTC", "ETH", "BNB", "SOL"];

for (let i = 0; i < 4; i++) {
  const symbolName = symbols[i];
  // 调用加密货币数据API
  fetch(`https://api.example.com/data?symbol=${symbolName}`)
    .then(response => response.json())
    .then(data => {
      // 修正属性访问方式：用方括号访问动态变量symbolName
      const price = data.DISPLAY[symbolName].USD.PRICE;
      const coinName = data.DISPLAY[symbolName].USD.FROMSYMBOL; // 可获取更友好的币种名称

      // 动态定位DOM元素并更新内容
      document.getElementById(`coin${i}price`).innerText = price;
      document.getElementById(`coin${i}name`).innerText = coinName;
    })
    .catch(error => {
      console.error(`获取${symbolName}数据失败:`, error);
      // 请求失败时给用户反馈
      document.getElementById(`coin${i}price`).innerText = "加载失败";
      document.getElementById(`coin${i}name`).innerText = symbolName;
    });
}

关键注意事项 #

1. 属性访问语法：当属性名是变量时，data.DISPLAY[symbolName]是唯一正确的写法，点语法data.DISPLAY.symbolName会被解析为访问名为symbolName的固定属性，而非变量对应的属性值
2. 循环变量作用域：必须用let声明循环变量i，如果用var会因异步回调的作用域问题，导致所有回调都使用最后一次循环的i值
3. 错误处理：添加catch块处理API请求失败的情况，避免页面出现未处理错误，同时给用户明确的反馈

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