如何使用返回的 JSON 数据过滤掉重复的名称答案

【问题标题】：How to filter out duplicate names with returned JSON data如何使用返回的 JSON 数据过滤掉重复的名称
【发布时间】：2019-11-09 01:05:59
【问题描述】：

我有多个来自 JSON 响应的同名数据。我正在寻找一个函数来过滤掉我的选项列表中的同名数据。

       const select = document.getElementById('brand');
/**===============Fetch requests=========== */

        fetch("http://makeup-api.herokuapp.com/api/v1/products.json")
        .then((resp) => resp.json())
        .then(function(data) {
            let products = data;
            return products.map(function(product) {
            console.log(product.brand);
          })
        })
        .catch(function(error) {
          console.log(error);
        });

        fetch("http://makeup-api.herokuapp.com/api/v1/products.json")
         .then((resp) => resp.json())
        .then((resp) => generateOptions(resp))

/*===========Helper Functions====================== */
      function generateOptions(data) {
        let products = data;
        const options = products.map(item => `
          <option value='${item.brand}'>${item.brand}</option>
        `).join('');
        select.innerHTML = options;
        
      }

【问题讨论】：

响应数据是什么样的？

标签： javascript json reactjs api fetch

【解决方案1】：

如果我理解正确，您的问题是响应包含多个具有相同 brand 名称的产品。

有多种方法可以做到这一点。如果下拉列表的预期是只包含品牌，那么新的 API 可以只返回所有品牌和相关元数据。所以 get brands 会返回一系列独特的品牌对象。

如果您想使用现有请求执行此操作，您可以遍历响应并创建一个单独的品牌名称 Set。在 JavaScript 中设置：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set

一个集合不允许你有重复的键。然后，您可以遍历该集合以创建 HTML 选择选项。

【讨论】：

是的，期望只是有一个品牌名称的下拉列表，我似乎无法为此创建解决方案。

【解决方案2】：

利用新地图

const duplicates = [['dior', 'data'], ['iman', 'data'], ['dior, iman']]
const dedup = new Map(duplicates)

【讨论】：