Fagbemi Ayodele
Fagbemi Ayodele

Reputation: 321

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

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

enter image description here

{"data":[{
"loginStatus":"Valid",
"CustomerName":"Fagbemi Ayodele",
"Mobile":null,
"Email":"[email protected]",
"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.

Upvotes: 1

Views: 349

Answers (1)

Tomislav Stankovic
Tomislav Stankovic

Reputation: 3126

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');
//[email protected]

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

enter image description here

Upvotes: 1

Related Questions