Web JSON Remove Duplicates

Ionic Framework ionic-v3
1

I want to list only unique category name on the html page. How can I do that?

gittigidiyor.ts

import { Component } from '@angular/core';
import {Http} from '@angular/http';
import { NavController } from 'ionic-angular';
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/map'
import { Kategori } from '../../entities/kategori';
import { KategoriServis } from '../../providers/kategori.service';


@Component({
  selector: 'page-gittigidiyor',
  templateUrl: 'gittigidiyor.html',
  providers:[KategoriServis]
})
export class GittigidiyorPage {

  public items:any;
  kategoriler:Kategori[];
  yenikategori:Kategori[];

  constructor(
  public navCtrl: NavController,
  public http: Http,
  public kategoriservis:KategoriServis) {
    this.http.get("http://alshainmobileapp.com/gittigidiyor.php")
            .map(p => p.json()["data"]) 
            .subscribe(p =>{
                console.log(p);
                this.items = p.filter(item => item.Indirim >='0');
             },error=>{
                 console.log(error);// Error getting the data
             });
  }
  
  ionViewDidLoad() {
    console.log('ionViewDidLoad GittigidiyorPage');
    this.Kategori();
  }

  Indirim(value:string){
    this.http.get("http://alshainmobileapp.com/gittigidiyor.php")
    .map(p => p.json().data) 
    .subscribe(p =>{
        console.log(p);
        this.items = p.filter(item => (item.Indirim >=value));
     },error=>{
         console.log(error);// Error getting the data
     });
  }
  
  KategoriGetir(kategori:string){
    this.http.get("http://alshainmobileapp.com/gittigidiyor.php")
    .map(p => p.json().data) 
    .subscribe(p =>{
        console.log(p);
        this.items = p.filter(item => (item.kategori==kategori));
     },error=>{
         console.log(error);// Error getting the data
     });
  }

  Kategori(){
    this.kategoriservis.getKategori().subscribe(data=>this.kategoriler=data['data'])
  }
}

kategori.service.ts

import {Injectable,Inject} from '@angular/core';
import {Kategori} from '../entities/kategori';
import {Http,Response} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';


@Injectable()
export class KategoriServis{
    items:any;
    constructor(private http:Http, @Inject('apiUrl') private apiUrl){}
        getKategori(): Observable<Kategori[]> {
        return this.http.get(this.apiUrl).map(response=>response.json())}
    }

gittigidiyor.html

<ion-header>
    <ion-navbar>
      <button ion-button menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
      <ion-title>GG</ion-title>
      <ion-buttons end> <button ion-button>Filtre</button>
      </ion-buttons>
    </ion-navbar>
  </ion-header>

<ion-content padding>
    <ion-item>
        <ion-label>İndirim Oranı</ion-label>
        <ion-select [(ngModel)]="indirim" (ionChange)="Indirim($event)">
          <ion-option value="60">%60 ve üzeri</ion-option>
          <ion-option value="10">%10 ve üzeri</ion-option>
          <ion-option value="20">%20 ve üzeri</ion-option>
          <ion-option value="40">%40 ve üzeri</ion-option>
        </ion-select>
      </ion-item>
      <ion-item>
          <ion-label>Kategori</ion-label >
          <ion-select [(ngModel)]="kategoriZZ" (ionChange)="KategoriGetir($event)">
            <ion-option *ngFor="let kategori of kategoriler" value="{{kategori.kategori}}">{{kategori.kategori}}</ion-option>
          </ion-select>
        </ion-item>
    <ion-list>
        <ion-item *ngFor="let item of items">
          <h2>{{item.Baslik}}</h2>
          <p>{{item.Indirim}}</p>
        </ion-item>
      </ion-list>
</ion-content>