Filter JSON by specific value ionic 2

Question

im new in IOnic 2 and Angular, i try to filter a Json to show only a especific value; example get only user by gender. this is my code

home.html

<ion-list>
    <ion-item *ngFor="let item of items | filter: {item.gender:'female'}" (click)="itemClicked($event,item)">
      <ion-avatar item-left>
        <img src="{{item.picture.thumbnail}}">
      </ion-avatar>
      <h2>{{item.name.first | uppercase }}</h2>
      <h3>{{item.name.last | uppercase }}</h2>
      <p>{{item.gender}}</p>
      <button ion-button item-right color="danger" (click)="buttonClick($event)">Button</button>
    </ion-item>
  </ion-list>

This is my .ts file with the API Service

    import { Component } from '@angular/core';
import {Http} from '@angular/http';
import { NavController } from 'ionic-angular';
import 'rxjs/add/operator/toPromise';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
public items:any;
  constructor(public navCtrl: NavController,public http: Http) {
      this.http = http;
        this.http.get("http://api.randomuser.me/?results=10")
            .subscribe(data =>{
              //console.log(data['_body']);
             this.items=JSON.parse(data['_body']).results;//Bind data to items object
            },error=>{
                console.log(error);// Error getting the data
            } );
  }
 buttonClick(event){
   console.log("button clicked");
   console.log(event);
  }

  itemClicked(event,itemData){
    console.log("item clicked");
    console.log(event);
    console.log(itemData);
  }
}

But my idea does not work any idea to help me-?? :`/

Answer 1

You can do that in the component code instead of in the view...

import { Component } from '@angular/core';
import {Http} from '@angular/http';
import { NavController } from 'ionic-angular';
import 'rxjs/add/operator/toPromise';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

    public items: any;

    constructor(public navCtrl: NavController, public http: Http) {
        // this.http = http; <- You don't need this, this.http is already available because by declaring it in the constructor, now a public property is created in the component
        this.http.get("http://api.randomuser.me/?results=10")
            .map(data => data.json().results) // Instead of getting the _body manually, you can use the map method from RxJS
            .subscribe(data =>{
                //console.log(data);
                this.items = data.filter(item => item.gender === 'female');
             },error=>{
                 console.log(error);// Error getting the data
             });
     }


     // ...

}

And now in your view

  <ion-list>
    <ion-item *ngFor="let item of items" (click)="itemClicked($event,item)">
      <ion-avatar item-left>
        <img src="{{ item.picture.thumbnail }}">
      </ion-avatar>
      <h2>{{ item.name.first | uppercase }}</h2>
      <h3>{{ item.name.last | uppercase }}</h2>
      <p>{{ item.gender }}</p>
      <button ion-button item-right color="danger" (click)="buttonClick($event)">Button</button>
    </ion-item>
  </ion-list>