inventoryData returns undefined because $http.get is asynchronous, how do I refactor code?

Question

I am making the following http get call to acquire an html page source code and then parse through it.

For some reason, it keeps returning undefined.

How can I fix it?

Update: It seems that $http.get() is asynchronous, so how would I go about returning a value from it?

function checkInventory() {
  var newReqObj = DataService.getFormData();
  var store = newReqObj.store;
  var code = newReqObj.code;
  var size = newReqObj.size;

  if(store === 'nike') {
        var inventoryData = checkNike(store, code, size);
        $log.debug(inventoryData);
        return inventoryData;
    }
}

function checkNike(store, code, size) {
    var inventoryData = {
        'qtyAvailable': 0,
        'maxOrder': 0,
        'size': 0,
        'name': '',
        'price': '',
        'url': '',
        'code': code
    };

    var url = 'http://www.nike.co.uk/search?q=' + code;
    checkNikeUrl(url, size, inventoryData);
}

function checkNikeUrl(url, size, inventoryData) {
    $http.get(url).then(function(response) {
        var html = response.data;

        inventoryData.qtyAvailable = utility.getProductQty(html, size);
        inventoryData.maxOrder = utility.getProductMaxOrder(html, size);
        inventoryData.size = size;
        inventoryData.name = utility.getProductName(html);
        inventoryData.price = utility.getProductPrice(html);
        inventoryData.url = url;

        return inventoryData;
    })
};

Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) Basically, `$http.get()` is asynchronous; you can't just return a value from it. — Heretic Monkey, Feb 20 '17 at 22:33
How can the code be refactored so that it returns a value. I am running a process that needs all the data to be returned after the submit button is pressed. — methuselah, Feb 20 '17 at 22:36
I see you are using `then`. If you are using promises, you can return the Promise and control the flow using promises — Marian, Feb 20 '17 at 22:41
@hlfrmn it means I have to refactor my code to use `$q.defer()` right? But I am not sure how to do this... — methuselah, Feb 20 '17 at 22:45
@methuselah more like `function checkNikeUrl(){return $http.get(function(){return x;})}` And the usage is `checkNikeUrl().then();` I suggest you read the linked answer. It describes the solution nicely. — Marian, Feb 20 '17 at 23:32
@methuselah Hi can you please post the full code? With the calling function from where checkInventory() is getting called. — Shahzad, Feb 22 '17 at 07:09

score 1 · Accepted Answer · answered Feb 21 '17 at 11:42

You have to add 2 returns in yout code.

First:

 $http.get(url).then(function(response) {

should be

return $http.get(url).then(function(response) {

And second

  checkNikeUrl(url, size, inventoryData);

should be

return checkNikeUrl(url, size, inventoryData);

EDIT

and i think that

var inventoryData = checkNike(store, code, size);

should be just

return checkNike(store, code, size);

score 1 · Answer 2 · answered Feb 22 '17 at 08:41

You can rewrite the code as follows:

function checkInventory() {
   var newReqObj = DataService.getFormData();
   var store = newReqObj.store;
   var code = newReqObj.code;
   var size = newReqObj.size;

     if(store === 'nike') {
        var deferred = $q.defer();
        checkNike(store, code, size).then(function(response){
            var inventoryData = response;
        $log.debug(inventoryData);

        deferred.resolve(inventoryData);
    });

    return deferred.promise;
    }
}

function checkNike(store, code, size) {
  var inventoryData = {
    'qtyAvailable': 0,
    'maxOrder': 0,
    'size': 0,
    'name': '',
    'price': '',
    'url': '',
    'code': code
  };

  var url = 'http://www.nike.co.uk/search?q=' + code;
  return checkNikeUrl(url, size, inventoryData);
}

function checkNikeUrl(url, size, inventoryData) {

    var deferred = $q.defer();

    $http.get(url).then(function(response) {
        var html = response.data;

        inventoryData.qtyAvailable = utility.getProductQty(html, size);
        inventoryData.maxOrder = utility.getProductMaxOrder(html, size);
        inventoryData.size = size;
        inventoryData.name = utility.getProductName(html);
        inventoryData.price = utility.getProductPrice(html);
        inventoryData.url = url;

        deferred.resolve(inventoryData);
    })

    return deferred.promise;
};

You can use this and the whichever method calls the checkInventory() method, they can catch the promise and process the inventory value returned.

inventoryData returns undefined because $http.get is asynchronous, how do I refactor code?

2 Answers2