Undefined variables within nested function

Question

I have a http post request which returns ID. I then try to pass that ID into another function. However, inside the next function I have a timeout that will loop the function to check the status. The ID returns undefined each time inside the timeout function.

First Function

Here I have 'res' which is a result from another function. I grab the status ID from the returned json and send it to 'getAlbum'.

anotherFunction(res) {
  this.getAlbum(res);
}

GetAlbum

If I do a console log immediately inside this function, it correct emits the correct ID. However, if I do it inside the 'checkAblumStatus' function, the id part is undefined.

getAlbum(id){

 var statusID = id.status_id;

  console.log('id = ' + statusID) // returns id

  var statusIDRequest = 'url' + statusID;

  var checkAblumStatus = function (statusIDRequest) {

    console.log('statusIDRequest = ' + statusIDRequest) // returns undefined for the ID part

    this.http.get(statusIDRequest).subscribe(res => {
      if (res.status == "completed") {
        // completed
      } else if (res.status == "failed") {
        // failed
      } else {
        setTimeout(checkAblumStatus, 1000);
      }
    });
  };

  setTimeout(checkAblumStatus, 1000);
}

Any help here would be very grateful :)

Possible duplicate of What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript? — Oliver
– Oliver, Commented Mar 22, 2018 at 9:07

user4676340 · Accepted Answer · 2018-03-22 08:59:39Z

1

This happens because of the scope of your variables.

  var checkAblumStatus = function (statusIDRequest) {

    console.log('statusIDRequest = ' + statusIDRequest) // returns undefined for the ID part

    this.http.get(statusIDRequest).subscribe(res => {
      if (res.status == "completed") {
        // completed
      } else if (res.status == "failed") {
        // failed
      } else {
        setTimeout(checkAblumStatus, 1000);
      }
    });
  };

In the context of your function, this references the function itself, not your object.

You need to use a closure or a fat arrow like this.

  var checkAblumStatus = (statusIDRequest) => {

You also need to provide a avariable to your calls.

setTimeout(checkAblumStatus(variable), 1000);

answered Mar 22, 2018 at 8:59

user4676340

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

7 Comments

user8516249 Over a year ago

Thanks for the response @trichetriche. I gave this a go. However the 'res.status' line errors out in typescript with '[ts] Property 'status' does not exist on type 'Object'. in using a fat arrow.

user4676340 Over a year ago

You mistyped your service function. Try with this this.http.get(statusIDRequest).subscribe((res: any) => {, or retype your service function.

user8516249 Over a year ago

Brilliant. I'm actually getting a result now. The only issue is now that when it hits the 'else' result, it's not looping back to test the function again. I tried your variable to setTimeOut and get 'Cannot invoke an expression whose type lacks a call signature. Type 'void' has no compatible call signatures.'

user4676340 Over a year ago

setTimeout(() => checkAblumStatus(variable), 1000); should work

user8516249 Over a year ago

Same thing I'm afraid.

|

Radonirina Maminiaina · Accepted Answer · 2018-03-22 09:08:37Z

You get confused with variable and param name.

var statusIDRequest = 'url' + statusID;
       ^       ^   // this variable
 var checkAblumStatus = function (statusIDRequest) {
                                     ^     ^ // .. is not the same not this param

Change the name of the variable like this, so you don't get rid of the name:

getAlbum(id){

 var statusID = id.status_id;

  console.log('id = ' + statusID) // returns id

  var statusID = 'url' + statusID;

  var checkAblumStatus = function (statusIDRequest) {

    console.log('statusIDRequest = ' + statusIDRequest) // returns the ID part

    this.http.get(statusIDRequest).subscribe(res => {
      if (res.status == "completed") {
        // completed
      } else if (res.status == "failed") {
        // failed
      } else {
        setTimeout( () => checkAblumStatus (statusIDRequest), 1000);
      }
    });
  };

  setTimeout(() => checkAblumStatus(statusID), 1000);
}

Raed Khalaf · Accepted Answer · 2018-03-22 10:26:14Z

0

you can pass the id for the function as follow

function getAlbum(id){

 var statusID = id.status_id;

  console.log('id = ' + statusID) // returns id

  var statusIDRequest = 'url' + statusID;

  var checkAblumStatus = ((statusIDRequest) => {

    console.log('statusIDRequest = ' + statusIDRequest) // returns undefined for the ID part

    this.http.get(statusIDRequest).subscribe(res => {
      if (res.status == "completed") {
        // completed
      } else if (res.status == "failed") {
        // failed
      } else {
        setTimeout(checkAblumStatus, 1000);
      }
    });
  })(statusIDRequest);

  setTimeout(checkAblumStatus, 1000);
}

edited Mar 22, 2018 at 10:26

answered Mar 22, 2018 at 9:04

Raed Khalaf

2,0752 gold badges16 silver badges30 bronze badges

2 Comments

user8516249 Over a year ago

Hi Raed, Thanks! I just gave this a go. It results in "ERROR TypeError: Cannot read property 'http' of undefined". Any ideas?

Raed Khalaf Over a year ago

i edit the answer, just change the function to arrow function

Collectives™ on Stack Overflow

Undefined variables within nested function

3 Answers 3

7 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related