如何过滤JSON响应中的重复品牌名，生成无重复下拉选项

你当前的代码存在两个小问题：一是重复发起了两次相同的API请求，二是直接生成所有品牌选项导致大量重复项。我来帮你调整代码，实现品牌去重+优化请求逻辑的效果：

第一步：合并重复的Fetch请求 #

没必要调用两次同一个接口，合并成一次请求既节省资源又更高效。

第二步：过滤无效品牌+实现去重 #

有些产品的brand字段可能是空值或空白字符串，我们先过滤掉这些无效项；再利用Set的特性自动剔除重复品牌（Set容器不会存储重复元素），最后把Set转回数组用于生成选项。

修改后的完整代码 #

const select = document.getElementById('brand');

// 仅发起一次API请求
fetch("http://makeup-api.herokuapp.com/api/v1/products.json")
  .then((resp) => resp.json())
  .then((data) => generateOptions(data))
  .catch(function(error) {
    console.log('请求出错:', error);
  });

function generateOptions(data) {
  // 1. 过滤出有有效品牌名的产品，提取品牌字段并去除首尾空格
  const validBrands = data
    .filter(product => product.brand && product.brand.trim() !== '')
    .map(product => product.brand.trim());
  
  // 2. 使用Set去重，再转回数组
  const uniqueBrands = [...new Set(validBrands)];
  
  // 可选：给品牌按字母排序，提升下拉选项的可读性
  uniqueBrands.sort();
  
  // 3. 生成下拉选项
  const options = uniqueBrands.map(brand => `
    <option value='${brand}'>${brand}</option>
  `).join('');
  
  // 新增默认提示选项（可选，但用户体验更友好）
  select.innerHTML = `<option value="">请选择品牌</option>${options}`;
}

关键逻辑说明 #

• 过滤无效品牌：通过filter剔除brand为空或纯空格的项，避免下拉框出现空选项
• Set去重：new Set(validBrands)自动处理重复值，扩展运算符[... ]将Set转换为数组，方便后续排序和生成选项
• 排序处理：uniqueBrands.sort()让品牌按字母顺序排列，用户查找更便捷
• 默认提示项：添加空值的默认选项，比直接展示品牌列表的引导性更强

这样调整后，下拉框里就只会显示唯一的品牌名了～

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