My goal is to:
- Create a shopping list that retrieves recipes from an API.
- Transfer ingredients from one page to another.
- Automatically refresh/load data when more than 1 item is added.
The challenge I am facing is:
- Only one set of ingredients loads.
- The clear function does not allow for adding more items.
Recipe Page
// Loading Recipes
/////////////////////////////////////////////////////////////////////
loadDetails1(id){
this.apiAuthentication.loadDetails(id)
.then(data => {
this.api = data;
});
}
// Add to Shopping List
/////////////////////////////////////////////////////////////////////
submit(api) {
let toast = this.toastCtrl.create({
message: 'Added to shopping list',
duration: 1000
});
console.log(this.api);
this.storage.get('myData').then((api) => {
// add one ingredient to the ingredientLines object
// if it's still a string use JSON.parse() on it
this.storage.set('myData', api).then(result =>{
toast.present();
console.log(api);
});
});
}
HTML
<h1 (click)="submit(api?.ingredientLines)">Add to shopping list</h1>
<ul>
<li *ngFor="let item of api?.ingredientLines"><span>{{item}}</span></li>
</ul>
Shopping List Page
getData() {
this.storage.get('myData').then((data => {
this.api = data;
console.log(data);
setInterval(() => {
console.log(data);
},5000);
}));
}
HTML
<ion-content padding>
<ion-card>
<ion-card-header>
{{api?.name}}
</ion-card-header>
<ion-list>
<ion-item>
<ul>
<li *ngFor="let item of api?.ingredientLines">
<ion-label>{{item}}</ion-label>
<ion-checkbox></ion-checkbox>
</li>
</ul>
</ion-item>
</ion-list>
<button ion-button block full color="danger" (click)="clear(item)">Remove</button>
</ion-card>
</ion-content>
Shopping list page image can be seen here: https://i.sstatic.net/Up5Oz.png
Error shown in visual is https://www.youtube.com/watch?v=BDS_XTdw2S0. The issue is that when an item is added to the shopping list, it does not update until the app is closed and restarted. Additionally, only one item is displayed at a time.