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

Question

我正在进行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;
        })

来自网址的 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> 

所以

在我看来，我将每个产品的颜色作为一个列表，就像我在列表中有 5 个产品所以 5 种颜色">

红色、蓝色、红色、蓝色、蓝色、蓝色、蓝色"。

我需要的只是该列表中的"红色，蓝色"，我需要一些逻辑或想法来解决这个问题。有人可以帮助我吗

Answer 1

您可以使用如下所示的方法删除重复项。

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);
      }
   }
}

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

Answer 2

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);