Ionic 3 Cordova Native Storage storing modified data

Question

I'm struggling to figure something out. Here's the relevant code.

types.json

{
    "types": [ 
        {"name": "Lateral Aids in Navigation", "enabled": false},
        {"name": "Canal Structures", "enabled": true},
        {"name": "Dockage", "enabled": true},
        {"name": "Launch Points", "enabled": true},
        {"name": "Landmarks", "enabled": true}
            ] 
}

app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { Http } from '@angular/http';
import { NativeStorage } from '@ionic-native/native-storage';
import { TabsPage } from '../pages/tabs/tabs';
import 'rxjs/add/operator/toPromise';


@Component({
  templateUrl: 'app.html'
})
export class CanalGuide {
  rootPage:any = TabsPage;
  public types;
  public places;

  constructor(public http: Http, public platform: Platform, public 
statusBar: StatusBar, public splashScreen: SplashScreen, public nativeStorage: 
NativeStorage) {

      platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();  
      this.readyTypes();
      this.readyPlaces();
      splashScreen.hide();
      });
    }
    readyTypes() { return this.http.get('./assets/data/types.json').toPromise().then(
        (types) => { this.nativeStorage.setItem('types', types) }); 
      }

    readyPlaces() { return this.http.get('./assets/data/canalwatertrail.json').toPromise().then(
      (places) => { this.nativeStorage.setItem('places', places) });
      }

  }

settings.ts

 import { Component } from '@angular/core';
 import { Http } from '@angular/http';
 import { NavController } from 'ionic-angular';
 import { NativeStorage } from '@ionic-native/native-storage';

@Component({
  selector: 'page-settings',
  templateUrl: 'settings.html'
})
export class SettingsPage {

public toggles;
public types;

constructor(private http: Http, public navCtrl: NavController, public 
nativeStorage: NativeStorage) {}

ionViewDidEnter() {
    this.nativeStorage.getItem('types').then((data) => {
      this.toggles = JSON.parse(data._body) 
      console.log(this.toggles);  
      });
    }
// The relevant code 
ionViewWillLeave() {
  this.nativeStorage.setItem('types', this.toggles);
  console.log(this.nativeStorage.getItem('types'));
    }

 }

settings.html

  <ion-header>
   <ion-navbar>
    <ion-title>
     Settings
    </ion-title>
  </ion-navbar>
 </ion-header>

 <ion-content>
  <ion-list no-lines *ngIf="toggles">
   <ion-list-header>Atlas Filters</ion-list-header>
     <ion-item *ngFor="let type of toggles.types">
       <ion-label>{{type.name}} - {{type.enabled}}</ion-label>
       <ion-toggle [(ngModel)]="type.enabled"></ion-toggle>
    </ion-item>  
  </ion-list>

My problem is this - The console.log() in ionViewWillLeave returns the following:

t {__zone_symbol__state: null, __zone_symbol__value: Array(0)}
__zone_symbol__state
:
true
__zone_symbol__value
:
{types: Array(5)}
__proto__
:
Object

Now in the ionicViewWillLeave function, how do I properly save the modifications to types.json back into Native Storage so it can be used again on a different page with nativeStorage.getItem ? This seemingly simple function has been driving me crazy for a while now.

Answer 1

Please take a look at the documentation: https://ionicframework.com/docs/native/native-storage/

getItem and setItem return a promise, so you can't simply log it. You have to wait until the promise is resolved.

this.nativeStorage.setItem('types', {property: 'value', anotherProperty: 'anotherValue'})
  .then(
    () => console.log('Stored item!'),
    error => console.error('Error storing item', error)
  );

or

this.nativeStorage.getItem('types')
  .then(
    data => console.log(data),
    error => console.error(error)
  );