Javascript 从API调用中筛选出在键上共享相同值的项

我有一个数据集，它返回一个对象数组，我想过滤掉在name键上具有相同值的任何对象。 返回数据的一个小示例：

{
    "product_id": 8432,
    "name": "Coca Cola",
    "size: "500ml",    
    "brewer": "Coke"
},
{
    "product_id": 1641,
    "name": "Coca Cola",
    "size: "355ml", 
    "brewer": "Coke"
},
{
    "product_id": 1010,
    "name": "Pepsi",
    "size": "355ml",    
    "brewer": "Pepsi Cola"
},
{
    "product_id": 5199,
    "name": "Sprite",
    "size": "500ml",    
    "brewer": "Coke"
}

所以其中一个可口可乐不应该被退回。然后我将该数组传递到一个组件中，该组件通过映射来显示数据

我一辈子都不知道如何过滤掉重复的名字。我试过了。过滤器，但无法理解里面的逻辑。我试过设置，但这对我来说是新的

有人知道吗？ 以下是调用函数：

getDrinks = () => {
      const data = await fetch(this.state.url);
      let newData= await data.json();
      newData.length = 10; //the returned data is thousands long and I only want 10 displayed.

      this.setState({
        drinks: jsonData,
      });
  }

---

像这样的怎么样

const data = await fetch(this.state.url);
const jsonData = await data.json();

var filteredData = [];
jsonData.forEach(drink => {
  if(!filteredData.some(x=>x.name == drink.name)){
    filteredData.push(drink);
  }
})

---

您希望在迭代时跟踪看到的名称。比如说：

//发生的一组名称。
常量名称=新集合（）；
//筛选数据以删除重复的名称。
const result=data.filter（{name）=>{
//如果名称已出现，请跳过它。
if（name.has（name））{
返回false；
}
//否则，将其添加到名称集并保留。
名称。添加（名称）；
返回true；
});

尝试使用

减少

方法：

const sourceData=[{
“产品标识”：574031，
“名称”：“可口可乐”，
“尺寸”：“500ml”，
“啤酒商”：“可乐”
},
{
“产品标识”：574042，
“名称”：“可口可乐”，
“尺寸”：“355ml”，
“啤酒商”：“可乐”
},
{
“产品id”：7888172，
“名称”：“百事可乐”，
“尺寸”：“355ml”，
“啤酒商”：“百事可乐”
},
{
“产品id”：4359922，
“名字”：“精灵”，
“尺寸”：“500ml”，
“啤酒商”：“可乐”
}];
const uniqueObjects=sourceData.reduce（（a，c）=>{
赋值（a，{[c.name]：c}）；
返回a；
}, {});
const unique=Object.values（uniqueObjects）；
console.log（唯一）；