Shopping List not listing/saving more than 1 recipe

My Aim is

1. Create a shopping list which is pulling recipes from an API.
2. Take ingredients from one page to another.
3. Page to refresh/load data when more than 1 is added.

The issue I am having is

1. Only 1 set of ingredients load
2. The clear function will not allow anymore to be added.

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 igredient 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 looks like

Error shown in visual is https://www.youtube.com/watch?v=BDS_XTdw2S0 You can see that when I add an item to the shopping list it does not update until i close the app and restart it. Also there is only ever 1 item.

1 Answers

Answers 1

You're overwriting your storage that's why only 1 appears.

It should look like this, try to use types and promises

public submit(ingredientLines: any) {  let toast = this.toastCtrl.create({     message: 'Added to shopping list',     duration: 1000 });  this.storage.get('myData').then((ingredientLines) => {      console.log(ingredientLines);      // add one igredient to the ingredientLines object     // if it's still a string use JSON.parse() on it     this.storage.set('myData', ingredientLines).then(result =>{         toast.present();     });  });  } 

So

1. Get the data from storage

2. Apply new item to data

3. Set new data to storage

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati