How to use a variable returned by $.getJSON in another function

Question

I have a javascript object with several properties and methods. I want to call the first method within the second, in order to get the default number of ingredients of a pizza and compare it with another value. However, I detect that no-value is present in the comparison of the second method.

Googling about this issue, I saw that I have to make a callback in the first method, but it didn't work for me. So, how can I be sure that the property obj.app.defaultIngredients will have a value returned by the JSON, when a 'click' event in the second method will occur? And, in that moment, I can compare the value as you also can see in the second method?

There is my (not working) code:

obj = {};
obj.app = {

    defaultIngredients: '',

    getDefaultIngredientsNumber: function() {
        $.getJSON('/sites/all/json/pizza.json', function(data) {
            var node = $('.node').attr('data-nid'),
                node = 'node-' + node; // returns something like 'node-3'
                $.each(data, function(key, val) {
                  // This returns an integer
             obj.app.defaultIngredients = parseInt(data[node].general.default_ingredients);
                });
        }).done(function() {
            return obj.app.defaultIngredients;  
        });
    },

    customAddToCart: function() {
        $('#button').click(function(){
            var defaultIngredients = obj.app.getDefaultIngredientsNumber();
            var selectedIngredients = 0;    
            if defaultIngredients >= selectedIngredients) {
                alert('Add some ingredients');
            }
        }
    }   
};

Some help with this will be very apreciated.

you cant return data from asynchronous function to use it immediately. — vinayakj, Jul 26 '15 at 20:34
Visit [Asynchronous & callbacks](http://stackoverflow.com/questions/31360437/cant-parse-and-return-ajax-string-to-jquery-variable/31360785#31360785) — vinayakj, Jul 26 '15 at 20:35

vinayakj · Accepted Answer · 2015-07-26T21:19:33.463

1

getDefaultIngredientsNumber: function(callback) {
   $.getJSON('/sites/all/json/pizza.json', function(data) {
        var node = $('.node').attr('data-nid'),
        node = 'node-' + node; // returns something like 'node-3'
        $.each(data, function(key, val) {
            obj.app.defaultIngredients = parseInt(data[node].general.default_ingredients);
        });

        callback(obj.app.defaultIngredients)
   })
},

customAddToCart: function() {
  $('#button').click(function(){
       obj.app.getDefaultIngredientsNumber(function(defaultIngredients) {
                  var selectedIngredients = 0;    
                  if (defaultIngredients >= selectedIngredients) {
                       alert('Add some ingredients');
                  }
       })
   })
}

edited Jul 26 '15 at 21:19

answered Jul 26 '15 at 20:39

vinayakj

5,591
3
28
48

Exactly, once launched, let it handle the alerting on "done" . – ion Jul 26 '15 at 20:44
But... I don't want to only declare the first function to only return the JSON and do 'the stuff' in the second. The idea is to have the 'stuff' separated in several functions as long it were possible. – donbuche Jul 26 '15 at 21:06
In the same time I was trying to understand the like you wrote above, you rewrite another code xD. Please, give me some time to try if it works for me... – donbuche Jul 26 '15 at 21:18
try this one Actually – vinayakj Jul 26 '15 at 21:20
I think this second try also doesn't work for me. I can't retrieve the data before I need it... I'm trying to get fresh ideas about this, seeing http://davidwalsh.name/write-javascript-promises What do think about that? – donbuche Jul 27 '15 at 21:37
1

Finally I could reach my goal with your code's example. You we're right, mate! – donbuche Aug 02 '15 at 23:31

ion · Answer 2 · 2015-07-26T20:41:36.010

I may be missing something since seems too easy ..

     });
    }).done(function(data) {
        return anotherfunction(data);  
    });

Or instead of this:

 customAddToCart: function() {
     $('#button').click(function(){
         var defaultIngredients = obj.app.getDefaultIngredientsNumber();
          var selectedIngredients = 0;    
        if defaultIngredients >= selectedIngredients) {
              alert('Add some ingredients');
        }
      }
   }   
};

I would use this:

customAddToCart: function() {
    $('#button').click(function(){
         obj.app.getDefaultIngredientsNumber("alert");
    }
}   
};

And in the getDefaultIngredientsNumber I would check if alert is set, then perform the alert..

How to use a variable returned by $.getJSON in another function

2 Answers2