Unable to get the value from my javascript function

Question

First here's my code below. My main problem is I can't return the result data outside my invokeConfigFile function after invoked or after ajax call.

var invokeConfigFile = function() {
  return $http.get('json/config.json');
};

var data = {}

var getDataFromInvokedFile = function() {
  invokeConfigFile().then(function(result) {

    var current_env = result.data.current_environment,
        list_env = result.data.environments;

    angular.forEach(list_env, function(value, key) {
      // retrive the config on the current environment
      if(key === current_env) {

          data = value;
          return false; //let's stop if the condition are met
      }
    });
    console.log(data); // return data GOOD
    return data;


  }, function(result) {

    if(result.status == 404) {
      alert("Server config.js file not found.");
      return false;
    }
  });
  console.log(data); // return data EMPTY
};

var my_urls = getDataFromInvokedFile();

What I'm trying to accomplish here is after I get the result data from my ajax call which is invokeConfigFile(), I will then store this to an object.

Something like this

return {
 my_obj : getDataFromInvokedFile()
}

The problem is that the Ajax call will be asynchronous. This means that the final console.log(data); that returns empty will be running prior to the call finishing. You should place this inside a callback function to make sure the value is set, or make the Ajax call Synchronous. — Nunners
– Nunners, Commented Nov 25, 2013 at 12:41
thanks to Guffa and your comments I got it working. But for the last part how do I set the returned data in the return { my_obj : getDataFromInvokedFile()}? — user2720708
– user2720708, Commented Nov 25, 2013 at 13:13

Guffa · Accepted Answer · 2013-11-25 12:40:53Z

2

You can't return the data from the function, as the AJAX call is asynchronous. The response arrives after the function returns.

Use a callback to handle the data when it arrives:

function getDataFromInvokedFile(callback) {
  invokeConfigFile().then(function(result) {

    var current_env = result.data.current_environment,
        list_env = result.data.environments;

    angular.forEach(list_env, function(value, key) {
      // retrive the config on the current environment
      if(key === current_env) {

          data = value;
          return false; //let's stop if the condition are met
      }
    });
    callback(data);


  }, function(result) {

    if(result.status == 404) {
      alert("Server config.js file not found.");
      calback(false);
    }
  });
}

Usage:

getDataFromInvokedFile(function(data){
  // here you have the data
});

answered Nov 25, 2013 at 12:40

Guffa

703k111 gold badges760 silver badges1k bronze badges

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

6 Comments

user2720708 Over a year ago

thanks, it works. But how do I set the data in a return obj property. E.G getDataFromInvokedFile(function(data){ data = data;}); return {my_data : data}. So when I invoked/called the file it just be my_invoked_file.my_data;

Guffa Over a year ago

@user2720708: It's the same situation there, you can't use the data in the code that comes after the call to getDataFromInvokedFile, because that code is executed before the callback function is called. As you use an asynchronous call, you have to handle the result asynchronously. You can't return the data before it exists.

user2720708 Over a year ago

Could you help me to make it synchronous then? I'm having a hard time making this work T_T

Guffa Over a year ago

@user2720708: The $http.get method doesn't seem to supports synchronous requests as far as I can see. You can use some other library, but using a synchronous request is not a good idea as it will completely freeze the browser while it is waiting for the response.

user2720708 Over a year ago

hmm, I think I'll just be using $rootScope to pass data's. Hmm. Can't think of any other simple way.

|

AAA · Accepted Answer · 2013-11-25 12:40:58Z

0

i make some change so comment "check here"

var getDataFromInvokedFile = function() {
  invokeConfigFile().then(function(result) {

    var current_env = result.data.current_environment,
        list_env = result.data.environments;

    angular.forEach(list_env, function(value, key) {
      // retrive the config on the current environment
      if(key === current_env) {    
          data = value;
          return false; //let's stop if the condition are met
      }
    });
    console.log(data); // return data GOOD
    return data;   

  }, function(result) {

    if(result.status == 404) {
      alert("Server config.js file not found.");
      return false;

} console.log(data); // check here

  });      
};

edited Nov 25, 2013 at 12:40

answered Nov 25, 2013 at 12:29

AAA

1427 bronze badges

1 Comment

Guffa Over a year ago

The code that you added will never be executed, as the return statement on the line before exits from the function.

Collectives™ on Stack Overflow

Unable to get the value from my javascript function

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related