In my Ionic App, I have the following on my home.ts:
export class HomePage {
itemsInitial = []; //initialize your itemsInitial array empty
items = []; //initialize your items array empty
gameTitlesInitial = []; //initialize your itemsInitial array empty
gameTitles = []; //initialize your items array empty
searchGameTitleString = ''; // initialize your searchItemsString string empty
constructor(http: Http) {
http.get('http://localhost/wordpress-templates/wordpress/index.php/wp-json/wp/v2/business/')
.map(res => res.json())
.subscribe(data => {
this.itemsInitial = data;
this.items = data;
var gameTitles = this.items.map(function (el) {
return el.title.rendered;
});
console.log(gameTitles);
});
}
searchGameTitle(searchbar) {
// reset items list with initial call
this.gameTitles = this.gameTitlesInitial;
// set q to the value of the searchbar
var q = searchbar.target.value;
// if the value is an empty string don't filter the items
if (q.trim() == '') {
return;
}
this.gameTitles = this.gameTitles.filter((v) => {
if (v.toLowerCase().indexOf(q.toLowerCase()) > -1) {
return true;
}
return false;
})
}
}
....and the following on my home.html:
<ion-content>
<ion-searchbar [(ngModel)]="searchGameTitleString" (input)="searchGameTitle($event)" placeholder="Search"></ion-searchbar>
<ion-list>
<button ion-item *ngFor="let gameTitle of gameTitles">
{{gameTitle}}
</button>
</ion-list>
</ion-content>
Can someone help me: How can I replace the empty array "gameTitles" at the top with the values of the var "gameTitles" in my http get?
console.log(gameTitles);
does indeed give me
["game one", "game two", "game three"]
in the console... so the http get seems to work.
I'd greatly appreciate any help with this – I've tried many ways without any success.