i am making a url call so that it returns a json. when i try to display it to my html i am getting repetition of values which must be avoided. 

```
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 response from url

```
 [
        {
            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'
        }

    ];

```

And in my 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> 

```

So in my view i am getting the color of each and every product as a list, like i am having 5 product so 5 color in list "red , blue, red, blue, blue, blue".

What i need is only "red, blue" in that list i need some logic or idea to fix this.
Could someone help me