How to Parse a Json Data Response from an API call in Ionic v3 and store in localStorage

Question

I want to access array data and store in localStorage.

I made an API call and get a response as below, shown on console

My Api Provider:

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';

let apiUrl = 'http://localhost:83/buildit/api';

@Injectable()
export class AuthServiceProvider {

  constructor(public http: Http) { }

  login(credentials) {
  //let headers = new Headers();
  return new Promise((resolve, reject) => {
      this.http.post(apiUrl + '/login.php', JSON.stringify(credentials))
        .subscribe(res => {
          resolve(res.json());

        }, (err) => {
          reject(err);
        });
    });

  }
}

login.ts

doLogin() {
     if(this.loginData.LoginID =='' || this.loginData.Password ==''){

     let toast = this.toastCtrl.create({
      message: "Enter username and password",
      duration: 3000,
      position: 'bottom',
      dismissOnPageChange: true
    });
    toast.onDidDismiss(() => {
    });
    toast.present();
     }
    else if(this.loginData.LoginID!=='' && this.loginData.Password!==''){
      this.showLoader();
      this.authService.login(this.loginData).then((result) => {
        this.data = result.data;
        console.log(this.data.loginStatus);

        if (this.data.loginStatus == 'Valid') {
          localStorage.setItem('loginStatus', this.data.loginStatus);
          localStorage.setItem('CustomerName', this.data.CustomerName);
          localStorage.setItem('Mobile', this.data.Mobile);
          localStorage.setItem('Email', this.data.Email);
          localStorage.setItem('CustomerID', this.data.CustomerID);
          this.navCtrl.setRoot(MyApp);
          this.loading.dismiss();
        }
        else if (result['msg'] == "Please verify your mobile no. to Login") {
          this.navCtrl.push(OtpPage,{
            ID : result['data'].CustomerID , Mobile : this.loginData.LoginID,
            Email: result['data'].Email
          });
          this.loading.dismiss();
        }
        else {
          document.getElementById('err-span').style.display = "block";
          this.loading.dismiss();
        }
      }, (err) => {
        this.loading.dismiss();
        this.presentToast(err);
      });
    }

  }

Console.log(data) shows

{"data":[{
"loginStatus":"Valid",
"CustomerName":"Fagbemi Ayodele",
"Mobile":null,
"Email":"fagbemiayodele48@gmail.com",
"CustomerID":"3"
}]}

I need to parse the JSON data to get individual 'value'

I tried this.data.loginStatus to get the loginStatus but it give null value, likewise for others.

Please, can someone show me how to get the data individual value in ionic 3?

Thanks.

Answer 1

Individual values you can get like this:

data[0]['loginStatus']
localStorage.setItem('loginStatus', data[0]['loginStatus']);
localStorage.getItem('loginStatus');
//Valid

data[0]['CustomerName']
localStorage.setItem('CustomerName', data[0]['CustomerName']);
localStorage.getItem('CustomerName');
//Fagbemi Ayodele

data[0]['Mobile']
localStorage.setItem('Mobile', data[0]['Mobile']);
localStorage.getItem('Mobile');
//null

data[0]['Email']
localStorage.setItem('Email', data[0]['Email']);
localStorage.getItem('Email');
//fagbemiayodele48@gmail.com

data[0]['CustomerID']
localStorage.setItem('CustomerID', data[0]['CustomerID']);
localStorage.getItem('CustomerID');
//3