I attempted to filter an array from a JSON with the following structure
{ID: "2031", title: "title 1", image: "http://wwwsite.com/im.jpg", url:
"url...", Goal: "3000000", …}
The array is named 'loadedprojects' and below is the filtering function:
getItems(ev: any) {
// Reset items back to all of the items
this.getloadedproject();
// set val to the value of the searchbar
let val = ev.target.value;
// if the value is an empty string don't filter the items
if (val && val.trim() != '') {
this.loadedprojects = this.loadedprojects.filter((project) => {
console.log( this.loadedprojects);
return (project.title.indexOf(val) > -1);
})
}
}
On the HTML page:
<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
Preview of the HTML page:
<ion-card *ngFor="let project of loadedprojects">
<img src="{{project.image}}" />
<ion-card-content>
<ion-card-title>{{ project.title }}</ion-card-title>
<p>{{ project.country }}</p>
</ion-card-content>
<ion-grid >
<ion-row>
<ion-col col-6> {{ 'Goal' | translate }}</ion-col>
<ion-col col-6 class="value-amount"> {{ project.Goal | number }} رق </ion-col>
</ion-row>
<ion-row>
<ion-col col-6> {{ 'Donations' | translate }}</ion-col>
<ion-col col-6 class="value-amount"> {{ project.Donation | number }} رق </ion-col>
</ion-row>
<ion-row>
<ion-col col-6> {{ 'Donors' | translate }}</ion-col>
<ion-col col-6 class="value-amount"> {{ project.nbr_donors }} </ion-col>
</ion-row>
<ion-row>
<ion-col col-12>
<button ion-button block class="donate_button" (click)="donation_options(project.ID, project.title, project.image)">{{ 'Donate' | translate }}</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-card>
I am facing issues with the search system implementation.