Undefined variable in angular using IONIC framework

Question

Im trying to set values from a JSON response into some variables. But the value is not set and returns "undefined" when trying to see the values in Console.log().

Does anyone know what I'm doing wrong here?

public data: any;
carbs: string;
fat:any;
protein:any;

constructor(public navCtrl: NavController,public userprovider: UserProvider) {

    //returns json array
    this.user = this.userprovider.getUser(userid);

    this.user.toPromise().then(res => {

        this.carbs = res[0].carbs;
        this.fat = res[0].fat;
        this.protein = res[0].protein;

    });

    console.log(this.carbs);
   //pass the data here
     this.data = {"Macros":[{"Macros":"Prot","time":this.protein,"color":"#3fa9f5","hover":"#57c0f5"},{"Macros":"Carb","time":this.carbs,"color":"rgb(236, 240, 241)","hover":"rgb(236, 240, 241)"},{"Macros":"Fat","time":this.fat,"color":"rgb(52, 73, 94)","hover":"rgb(52, 73, 94)"}]};


}

this user returns the json, console.log(res[0].carbs) inside the res => also outputs the right value. — sdfgg45
– sdfgg45, Commented Aug 10, 2018 at 12:42
ionViewDidLoad() {} use this function. Copy paste your code inside of it and check what happens. — user4799206
– user4799206, Commented Aug 10, 2018 at 12:43
reason is highly probable that before this.carbs = res[0].carbs; line console.log(this.carbs); is initiated. — user4799206
– user4799206, Commented Aug 10, 2018 at 12:45

score 1 · Accepted Answer · 2018-08-10 12:58:16Z

1

It is because that console.log(this.carbs); is initiated before this.carbs = res[0].carbs; is completed. Therefore, instead of calling your function outside the scope, call it inside of your scope.

Call your function from:

 this.user.toPromise().then(res => {

        this.carbs = res[0].carbs;
        this.fat = res[0].fat;
        this.protein = res[0].protein;
        this.yourFunction(res[0].protein, res[0].carbs, res[0].fat );
    });

. . .

yourFunction(protein, carbs, fat){
 this.data = {"Macros":[{"Macros":"Prot","time":protein,"color":"#3fa9f5","hover":"#57c0f5"},{"Macros":"Carb","time":carbs,"color":"rgb(236, 240, 241)","hover":"rgb(236, 240, 241)"},{"Macros":"Fat","time":fat,"color":"rgb(52, 73, 94)","hover":"rgb(52, 73, 94)"}]};
}

edited Aug 10, 2018 at 12:58

answered Aug 10, 2018 at 12:53

user4799206

Sign up to request clarification or add additional context in comments.

2 Comments

sdfgg45 Over a year ago

The same: ERROR TypeError: "this.data is undefined"

user4799206 Over a year ago

Come to chat please, unless stackoverflow will block comments

Collectives™ on Stack Overflow

Undefined variable in angular using IONIC framework

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related