Create A Search Bar Filter through Object

Ionic Framework ionic-v3
1

Hi All

So I have an API end Point that provided me with the following result set. Please see image of how it looks in the front-end.

alt text
BQw0rZX.png2484×1278

I also Used <ion-segment></ion-segment> to filter but Name, City, Occupation.

Question

I want to filter the same result by using the different criteria, which means,

  • On the Creatives Segment I want to type a person name and only filter using Full_name

  • On the City Segment I want to type a city name and only filter using the city from the object result

  • And So On …

My Code

Most of the code comes from Ionic V3 I just combined a lot of it

search.ts

export class SearchPage {

    items: Array<string>;
    criteria: string = "creative";
    allPeople    : any;


    constructor(public navCtrl: NavController, public navParams: NavParams, private searchServ : SearchService,) {
        this.allCreativeUsers();
    }

    allCreativeUsers() {

        this.searchServ.getAllCreatives().then(
            resp => {
                console.log( typeof (resp));
                console.log(resp);
                this.allPeople = resp;
            }
        );

    }


    ionViewDidLoad() {
        //console.log('ionViewDidLoad SearchPage');
    }


    filterItems(ev: any) {
    // This code is from the Example https://ionicframework.com/docs/v3/components/#searchbar
        this.setItems();

        let val = ev.target.value;

        if (val && val.trim() !== '') {
            // Get the matching person name from when I type in the search box
        }
    }
    
}

search.html

<ion-segment [(ngModel)]="criteria">
        <ion-segment-button value="creative"> Creatives </ion-segment-button>

        <ion-segment-button value="cities"> Cities </ion-segment-button>
    </ion-segment>

    <div [ngSwitch]="criteria">

        <ion-list *ngSwitchCase="'creative'">
            <ion-searchbar  placeholder="Filter by names" showCancelButton color="danger" (ionInput)="filterItems($event)"></ion-searchbar>

            <ion-item *ngFor="let person of allPeople; let i = index;" (click)="viewProfile( person.user_id )">
                <ion-avatar item-start>
                    <img src="assets/imgs/avatar-ts-woody.png">
                </ion-avatar>

                <h2>{{ person.full_name}}</h2>

                <p>{{ person.occupation }}</p>

                <ion-note item-end>13-02-2019</ion-note>
            </ion-item>

        </ion-list>

        <ion-list *ngSwitchCase="'cities'">
            <ion-searchbar  placeholder="Filter by City" showCancelButton color="danger" (ionInput)="filterItems($event)"></ion-searchbar>

            <ion-item>
                <h2>Johannesburg</h2>
            </ion-item>

        </ion-list>

    </div>

How Can I achieve this? Please help

Kind Regards

2

You want to create three additional object arrays. When the data is fetched, set the object arrays equal to the results you will want to use the newly created arrays for the population of your ion-list. I would use a switch statement within your filter function to determine how to filter. Clear the newly created object, populate it agin and then use Filter and forEach to populate the filtered items.

3

I found an very solution here: https://ionictemplates.blogspot.com/2020/10/ionic-45-high-performance-list.html