如何创建div并将API返回的Brands数据插入HTML页面？

嘿，我来帮你搞定这个问题！首先得纠正一个小误区：你现在用的JSON.stringify(data)其实是多余的——res.json()已经把API返回的响应转换成了JavaScript对象，咱们直接操作这个对象里的数据就好，不需要再把它转成字符串啦。

下面是完整的实现步骤和代码，一步步来：

第一步：准备HTML容器 #

先在你的页面里加一个用来存放品牌列表的div，给它一个id方便JS获取：

<div id="brands-container"></div>

第二步：修改fetch请求代码 #

接下来调整你的JS代码，去掉不必要的JSON.stringify，然后提取数据里的Brands字段，生成HTML插入到容器中：

fetch("http://makeup-api.herokuapp.com/api/v1/products.json")
  .then(res => res.json())
  .then(data => {
    // 1. 提取所有非空的品牌，同时去重（避免重复显示同一个品牌）
    const uniqueBrands = [...new Set(
      data.map(product => product.brand).filter(brand => brand)
    )];

    // 2. 获取页面上的容器元素
    const brandsContainer = document.getElementById('brands-container');

    // 3. 把品牌列表转换成HTML结构（这里用无序列表更规范）
    const brandsListHTML = `
      <h3>美妆品牌列表</h3>
      <ul>
        ${uniqueBrands.map(brand => `<li>${brand}</li>`).join('')}
      </ul>
    `;

    // 4. 把生成的HTML插入到容器里
    brandsContainer.innerHTML = brandsListHTML;
  })
  .catch(error => {
    // 别忘了处理请求失败的情况，给用户友好提示
    console.error('加载品牌数据出错:', error);
    const brandsContainer = document.getElementById('brands-container');
    brandsContainer.innerHTML = '<p>抱歉，品牌列表加载失败了，请稍后再试~</p>';
  });

关键细节说明： #

• 去重处理：用new Set()来过滤重复的品牌，因为API返回的产品里同一个品牌可能出现多次，这样显示出来的品牌都是唯一的。
• 过滤空值：有的产品可能没有brand字段（返回null或空字符串），所以用filter(brand => brand)把这些无效值去掉。
• 错误处理：加上.catch()捕获请求过程中可能出现的错误（比如网络问题、API报错），避免页面毫无反应。

如果你不想用无序列表，也可以换成段落或者其他标签，只需要修改map里的HTML模板就行，比如改成<p>${brand}</p>。

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