Cannot access returned data from Angular request

Question

For some reason, I cannot access the response from a request in an Angular project. Even if I can print it on console, I can access data.status and data.response, but when I try data.response.entries, I have the following issue.

My component:

  transportantions: any[]; //this is on the start of my component together with the rest of my variables

  getTransportations() {
    let loader = this.loadingController.create({
      content: 'Getting data...'
    });
    loader.present();   
    this.wpApi.getTransportations()
      .then(function (data) {
        console.log(data);
        if ( data.status == 200 ) {
          this.transportantions = data.response.entries;
          loader.dismiss(); 
        } else {
          console.log('Something was wrong. Error status ' + data.status);
        }  
      })
      .catch(function (err) {
        loader.dismiss(); 
        console.log('something was wrong: ' + err);
      });
  }

This is the output from console.log(data)

{
  "status": 200,
  "response": {
    "total_count": "242",
    "entries": [
      {
        ...
      },
      {
        ...
      },
      {
        ...
      },
      ...
    ]
  }
}

And the error I get is:

something was wrong: TypeError: Cannot set property 'transportantions' of undefined

Check for data.response. What you are getting ? Are you getting correct output? — The Hungry Dictator
– The Hungry Dictator, Commented Aug 8, 2017 at 9:18

Supamiu · Accepted Answer · 2017-08-08 09:18:42Z

2

You have to use an arrow function instead of an explicit function, allowing you to keep the current context in the scope of the function:

getTransportations() {
    let loader = this.loadingController.create({
      content: 'Getting data...'
    });
    loader.present();   
    this.wpApi.getTransportations()
      .then((data) => {
        console.log(data);
        if ( data.status == 200 ) {
          this.transportantions = data.response.entries;
          loader.dismiss(); 
        } else {
          console.log('Something was wrong. Error status ' + data.status);
        }  
      })
      .catch(function (err) {
        loader.dismiss(); 
        console.log('something was wrong: ' + err);
      });
  }

In your example, this is undefined because you lost the context in the function scope.

answered Aug 8, 2017 at 9:18

Supamiu

8,7417 gold badges47 silver badges79 bronze badges

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

Comments

Raed Khalaf · Accepted Answer · 2017-08-08 09:33:09Z

2

getTransportations() {
    let loader = this.loadingController.create({
      content: 'Getting data...'
    });
    loader.present();   
    this.wpApi.getTransportations()
      .then( (data) => { // just change the function format
        console.log(data);
        if ( data.status == 200 ) {
          this.transportantions = data.response.entries;
          loader.dismiss(); 
        } else {
          console.log('Something was wrong. Error status ' + data.status);
        }  
      })
      .catch(function (err) {
        loader.dismiss(); 
        console.log('something was wrong: ' + err);
      });
  }

just change the function format.

change function() {} format to this () => {} format in order to get access to 'this.transportantions';

more about arrow function: https://www.sitepoint.com/es6-arrow-functions-new-fat-concise-syntax-javascript/

edited Aug 8, 2017 at 9:33

answered Aug 8, 2017 at 9:18

Raed Khalaf

2,0752 gold badges16 silver badges30 bronze badges

2 Comments

Tasos Over a year ago

It worked. So many thanks. Will choose yours since it was the first one. Just need to wait 7 minutes for the time limitation.

Supamiu Over a year ago

@Tasos Even if I agree with the "your answer was first" logic, You should take a look at the documentation I linked to understand how arrow functions work, because it's important to understand why it works with it while it didn't with a simple js function.

Collectives™ on Stack Overflow

Cannot access returned data from Angular request

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related