Within my Progressive Web App, I am utilizing HTTP requests to populate flip cards with responses. The content of the requests relies on the selected values.
An issue arises when I choose an item from the dropdown menu. It triggers a request and displays the flip cards populated by that response. However, upon selecting another item, it creates a new request and adds additional cards without clearing the view (array) from the previous cards.
The searchByIngredient.component.ts
search() {
this.drinksapi.get(this.selectedIngredient.name).subscribe(data => {
const a = data[`drinks`];
a.map((y: { idDrink: any; }) => this.drinksapi.detailsCocktails(y.idDrink).subscribe(res => {
const b = res[`drinks`];
for (y of b) {
const obj = Object.assign({}, y);
this.onSearch.emit(obj);
}
}));
});
}
Navbar(dropdown).component.html
<ng-select [items]="ingredients"
bindLabel="name"
placeholder="Search By Ingredient"
[(ngModel)]="selectedIngredient"
(ngModelChange)="search()">
</ng-select>
App.Component.ts (likely containing the issue)
export class AppComponent {
title = 'CocktailDB';
drinks: Array<any> = [];
onSearch($event: any) {
// this.drinks.length = 0;
if (this.drinks !== []) {
this.drinks.push($event);
}
console.log('drinks', this.drinks);
} // end onSearch
I have also observed receiving "Drinks" one by one, here's a screenshot of the console
Depending on "this.drinks.length", I either receive an array where each new card is combined with the old ones, or only a single card is displayed (updated by the selected ingredient)...Yet, I am unclear on how to address this issue...My goal is simply to update the view (and empty the array) every time I select an item