如何调用回调函数内部定义的对象数组？

我需要调用在回调函数中定义的对象数组，用forEach循环遍历数组，把每个对象渲染到HTML的product-container div里。

HTML里有一个class为fetch-products的按钮和class为product-container的div，我写了下面的代码：

document.querySelector('button.fetch-products').addEventListener("click", function() {
  
  fetchProducts.foreach(function(item){
    document.querySelector('div.product-container').innerHTML = item;
  });
});

但运行时报错：Uncaught TypeError: fetchProducts.foreach is not a function

对象数组的定义如下：

const fetchProducts = (callback) => {
  setTimeout(() => {
    callback([
      {
        brand: "Converse",
        productName: "Chuck Taylor All Star Hi Top Sneaker",
        image: "https://www.famousfootwear.com/blob/product-images/20000/69/92/4/69924_right_medium.jpg",
        price: 59.99,
        badge: "NEW"
      },
      {
        brand: "Nike",
        productName: "Lebron Witness V Basketball Shoe",
        image: "https://www.famousfootwear.com/blob/product-images/20000/50/18/9/50189_right_medium.jpg",
        price: 99.99
      },
      {
        brand: "Crocs",
        productName: "Women's Classic Clog",
        image: "https://www.famousfootwear.com/blob/product-images/20000/99/02/0/99020_right_medium.jpg",
        price: 49.99,
        badge: "NEW"
      },
      {
        brand: "Vans",
        productName: "Women's Asher Slip On Sneaker",
        image: "https://www.famousfootwear.com/blob/product-images/20000/51/17/3/51173_right_medium.jpg",
        price: 54.99,
        badge: "ONLINE ONLY"
      }
    ]);
  }, 200);
};

错误原因分析 #

1. fetchProducts是函数而非数组：你直接给fetchProducts调用foreach（注意拼写错误，正确写法是forEach），但它本质是一个接收回调的异步函数，不是数组。必须调用它并传入回调，才能拿到内部的对象数组。
2. 直接赋值对象到innerHTML会显示异常：把对象直接赋值给innerHTML，会输出[object Object]，需要把对象转换成对应的HTML结构。
3. innerHTML赋值会覆盖内容：每次用innerHTML = item会覆盖之前的内容，应该用+=或者先拼接所有HTML再一次性赋值，避免频繁操作DOM。

修正后的代码 #

document.querySelector('button.fetch-products').addEventListener("click", function() {
  // 调用fetchProducts，传入回调函数接收数组
  fetchProducts(function(products) {
    const container = document.querySelector('div.product-container');
    // 清空容器原有内容
    container.innerHTML = '';
    // 遍历产品数组
    products.forEach(function(product) {
      // 把产品对象转换成HTML字符串
      const productHtml = `
        <div class="product-card">
          ${product.badge ? `<span class="badge">${product.badge}</span>` : ''}
          <img src="${product.image}" alt="${product.productName}">
          <h3>${product.brand}</h3>
          <p>${product.productName}</p>
          <span class="price">$${product.price.toFixed(2)}</span>
        </div>
      `;
      // 添加到容器中
      container.innerHTML += productHtml;
    });
  });
});

补充说明 #

• 可以给.product-card添加CSS样式优化布局，比如设置网格或弹性布局。
• 如果担心innerHTML的XSS风险（本次数据源可控，风险极低），也可以用createElement方法创建DOM元素后再添加到容器中。

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