JavaScript使用forEach遍历JSON数据渲染到HTML时显示异常如何解决？

架构老林

2026-9-28

现有代码问题梳理

接口返回的data是对象结构，而非数组，直接调用数组方法forEach会直接抛出语法错误
外层遍历逻辑即使修正后，内层Object.entries传入的是全局data而非当前遍历的单个产品对象，无法正确读取单条产品的属性
当前HTML只有一组展示容器，多产品数据遍历时会反复覆盖DOM内容，最终仅能展示最后一条数据
1day字段存在重复判断，第一条判断逻辑为空，第二条判断永远无法触发，且取值时误用全局data而非当前产品对象取值

修复后的代码

HTML代码

新增列表容器，支持多产品渲染：

<!-- 产品列表容器 -->
<div id="productList"></div>

JS代码

async function fetchData() {
  const response = await fetch('https://assets.cmcmarkets.com/json/cmc-test-most-popular-feed.json');
  const data = await response.json();
  const productList = document.querySelector('#productList');
  // 遍历对象的所有值，每个值对应一个产品对象
  Object.values(data).forEach(product => {
    // 动态生成单产品DOM结构
    const productEl = document.createElement('div');
    productEl.className = 'product-item';
    productEl.innerHTML = `
      <div class="name">Name: ${product.name}</div>
      <div class="code">Code: ${product.code}</div>
      <div class="spread">Spread: ${product.spread}</div>
      <div class="cellA">
        <div>movement: ${product['1day'].movement}</div>
        <div>price: ${product['1day'].price}</div>
      </div>
      <hr>
    `;
    productList.appendChild(productEl);
  });
}
fetchData();