Ionic 2:: Unusual TypeError retrieving a property from JSON in angular

Question

i created a provider in my ionic project to retrieve the user object from the storage and heres my code

import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';

@Injectable()
export class ApiProvider {

  public user: any;

  constructor(
    public storage: Storage
  ) {}

  getStoredUser(){
    this.storage.get('user').then(
      data => {
        this.user = data;
        console.log(data);
      }
    );    
    return this.user;
  }

when i console log the user object from the getStoredUser() function, this is what i get

{
   authcode: "USR_65267H4390"
   church_id: 2
   email: "test@gmail.com"
   fullname: ""An**a A***e""
   id: 55
   phone: "08*****7"
   skills: "Football, chess, scrabble"
}

the json data logs properly, but then when i try to do this on a different component

export class HomePage {

    obj: any;

    userObj:any = {
      name:'',
      email:'', 
      phone:'',
      skills:'',
      unit:'',
      church_id:2 //hardcoded on every request...
    };


  constructor(
    public navCtrl: NavController,
    public api: ApiProvider,
    public storage: Storage
  ) {} 

 ngOnInit():void{     

    this.obj = this.api.getStoredUser();

    //console.log(this.obj) - outputs the object above, no errors..
    //if(this.obj.length < 1)  - gives me error too.. i've tried everything 

    if(this.obj !== null){  //------------ this line gives me error.
        this.userObj = {
          name: this.obj.fullname, // ------- this property gives me error.
          email: this.obj.email, 
          phone: this.obj.phone,
          skills: this.obj.skills,
          unit:'', 
          church_id: this.obj.church_id 
        }
    } else{
      // do something else.
    }

  }

This is the error i get when i try to read fullname...

 " Uncaught(in promise): TypeError: Cannot read property 
 'fullname' of undefined TypeError: at Homepage.webpack.jsonp

and this is the error i get when i try to read the length of this.obj

  " Uncaught(in promise): TypeError: Cannot read property 
  'length' of undefined TypeError: at Homepage.webpack.jsonp...

i have tried everything and i dont know what to do.. the json object is constructed properly, i need help.

In your `ApiProvider` service, you are updating the user after getting the response (asynchronously). From your component, you are calling the method in your service, which immediately returns the `user` object (which as of now is `undefined`) and updates it later. So when you call the function from the component, you are getting an `undefined` object. You are getting errors because the object in undefined ( and the !== null, will return true) — Sachin Gupta, Dec 09 '18 at 08:59
Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — jonrsharpe, Dec 09 '18 at 09:00

score 0 · Accepted Answer · answered Dec 09 '18 at 08:57

the method getStoredUser returns a promise and you are trying to access it's value immediately.

You should access the return object after the promise is resolved using the then method:

this.api.getStoredUser().then(obj => {
      this.userObj = {
          name: obj.fullname, // ------- this property gives me error.
          email: obj.email, 
          phone: obj.phone,
          skills: obj.skills,
          unit:'', 
          church_id: obj.church_id 
        }
});

Or use async\await if you are ES7 compatible:

this.obj = await this.api.getStoredUser();

//if(this.obj.length < 1)  - gives me error too.. i've tried everything 

if(this.obj !== null){  //------------ this line gives me error.
    this.userObj = {
      name: this.obj.fullname, // ------- this property gives me error.
      email: this.obj.email, 
      phone: this.obj.phone,
      skills: this.obj.skills,
      unit:'', 
      church_id: this.obj.church_id 
    }
}

Ionic 2:: Unusual TypeError retrieving a property from JSON in angular

1 Answers1