Json 如果数组中有多个具有相同值的对象，则显示单个对象

我正在进行一个url调用，以便它返回一个json。当我试图将它显示到我的html中时，我得到了必须避免的重复值

export class ProductListPage {
 GetProductsTags: any = [];

searchProduct() {
    var url = 'myUrl';       
    this.http.get(url).map(res => res.json()).subscribe(data => {
        var getdata=JSON.parse(data.Response); 
        console.log(getdata);  
       this.storage.set("productTags", getdata);   
    });
}

fileter() {
        this.storage.get("productTags").then((data) => {
            console.log(data);
             this.GetProductsTags = data;
        })

来自url的JSON响应

 [
        {
            id: 1,
            color: "red",
            size: 'S',

        },
        {
            id: 2,
            color: "blue",
            sizes: 'M'
        },
        {
            id: 3,
            color: "red",
            sizes: 'L'
        },
        {
            id: 4,
            color: "blue",
            sizes: 'XL'
        },
        {
            id: 5,
            color: "blue",
            sizes: 'XXL'
        }

    ];

在我的html中

 <button (click)="fileter()">filter</button>
 <button (click)="searchProduct()">filter</button>
 <ion-label>item</ion-label>
     <ion-item *ngFor=" let item of GetProductsTags; let i=index ">
        <ion-label>{{item.color}}</ion-label>
         <ion-checkbox color="dark"></ion-checkbox>
  </ion-item> 

过滤器
滤波器
项目
{{item.color}

所以在我看来，我把每一种产品的颜色都列为一个列表，就像我在“红，蓝，红，蓝，蓝，蓝”列表中有5种产品，所以有5种颜色

我需要的只是列表中的“红色，蓝色”，我需要一些逻辑或想法来解决这个问题。

---

有人能帮我吗？

你可以用下面的方法删除重复项

public removeDuplicates(){
   for(int i=0;i<this.GetProductsTags.length;i++){
      if(!(this.colors.indexOf(this.GetProductsTags[i].color) > -1)){
         this.colors.push(this.GetProductsTags[i].color);
      }
   }
}

public removeDuplicates（）{
对于（int i=0；i-1））{
this.colors.push（this.GetProductsTags[i].color）；
}
}
}

---

将颜色数组初始化为全局。然后您可以使用该数组来迭代该数组。

您可以使用如下方法来删除重复项

public removeDuplicates(){
   for(int i=0;i<this.GetProductsTags.length;i++){
      if(!(this.colors.indexOf(this.GetProductsTags[i].color) > -1)){
         this.colors.push(this.GetProductsTags[i].color);
      }
   }
}

var uniqueColor = [];//declaring empty array
for(var data in getdata){
    if(uniqueColor.indexOf(getdata[data]['color'])==-1)//check the array, if the current color in this iteration is already pushed into the unique queue
      uniqueColor.push(getdata[data]['color']);// push the color to the unique if not already present
}
console.log(uniqueColor);

public removeDuplicates（）{
对于（int i=0；i-1））{
this.colors.push（this.GetProductsTags[i].color）；
}
}
}

---

将颜色数组初始化为全局。然后，您可以使用该数组来迭代。

我们或何时必须调用此函数您可以按如下方式调用此函数，

fileter（）{this.storage.get（“productTags”）。然后（（data）=>{console.log（data）；this.GetProductsTags=data；this.removeDuplicates（）；}）

此GetProductsTags是否引用空数组，我使用上面的代码获取错误现在检查它..我错过了

此

范围..我更正了：）这意味着GetProductsTags没有项目。请通过添加

console.log（this.GetProductsTags）检查它是否有项目

在methodwere中的for循环之前，或者我必须在何时调用此函数您可以按如下方式调用此函数，

fileter（）{this.storage.get（“productTags”）。然后（（数据）=>{console.log（数据）；this.GetProductsTags=data；this.removeDuplicates（）；}）

此GetProductsTags是否引用空数组，我使用上面的代码获取错误现在检查它..我错过了

此

范围..我更正了：）这意味着GetProductsTags没有项目。请通过添加

console.log（this.GetProductsTags）检查它是否有项目

在“我的方法”中的for循环之前，使用一个从数组中删除具有重复颜色的元素的管道。使用一个从数组中删除具有重复颜色的元素的管道。虽然此代码可能会回答这个问题，但提供有关如何和/或为什么解决问题的附加上下文将提高答案的长期价值。While此代码可以回答问题，提供有关如何和/或为什么解决问题的附加上下文，从而提高答案的长期价值。

var uniqueColor = [];//declaring empty array
for(var data in getdata){
    if(uniqueColor.indexOf(getdata[data]['color'])==-1)//check the array, if the current color in this iteration is already pushed into the unique queue
      uniqueColor.push(getdata[data]['color']);// push the color to the unique if not already present
}
console.log(uniqueColor);