CODEWITHSUNDEEP
javascriptjqueryajaxasynchronousgetjson
donbuche
donbuche

Reputation: 101

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

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.

Upvotes: 2

Views: 177

Answers (2)

vinayakj
vinayakj

Reputation: 5681

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');
                  }
       })
   })
}

Upvotes: 1

ion
ion

Reputation: 540

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..

Upvotes: 0

Related Questions