Return a value with jQuery each() function

Question

i'm new to javascript, and I would like to retrieve values from JSON and push it into an array so that I can parse again this array in another function, But I don't know how to return the array after pushing element inside it.

In the following script I can't display values in items

function gC(b,c,p) {

    $.getJSON('getmonths', 'b='+b+'&c='+c+'&p='+p, processJSON);    
}

function processJSON(data) {
      var retval = [];
      $.each(data, function(key, val) {

          retval.push(val); 
          //alert(retval.pop());
      });
      return retval;
}

    $(document).ready(function(){
       var b = $("#b").val();
       var c = $("#c").val();
       var p = $("#p").val();

       var items = [];

       items = gC(b,c,p);
       var i = 0;

       $('td').each(function(index) {
          $(this).attr('bgcolor', items[i]);
          i++;
       }

How could I access the array ?

thank !

gen_Eric · Accepted Answer · 2011-08-04 13:39:46Z

You don't return from an AJAX call, you have it call a callback function when it's done.

function gC(b,c,p) {
    var retval = [];
    $.getJSON('getmonths', 'b='+b+'&c='+c+'&p='+p, processData);
}

function processData(data){
  var retval = [];
  $.each(data, function(key, val) {
      retval.push(val); 
      //alert(retval.pop());
  });
  alert(retval);
}

processData would be called when the AJAX call is done. This can't return a value to another function, so all your logic has to be inside this callback function.

UPDATE: You can also pass in a callback function to gC to be called when it's done.

function gC(b,c,p,f) {
    var retval = [];
    $.getJSON('getmonths', 'b='+b+'&c='+c+'&p='+p, function(d){
       if(typeof f == 'function'){
         f(d);
       }
    });
}

Then you call gC like so:

gC(b,c,p,function(data){
    var retval = [];
    $.each(data, function(key, val) {
        retval.push(val); 
        //alert(retval.pop());
    });
    alert(retval);
});

UPDATE2: I saw the code you added to the question. This needs to be done in the callback.

gC(b,c,p,function(data){
    var items = [];
    $.each(data, function(key, val) {
       items.push(val);
    });
    $('td').each(function(index){  // You don't need a separate i variable
                                   // you can just use the index from the loop
      $(this).attr('bgcolor', items[index]);
   }
})

Of course you could add an extra parameter to gC so that you can pass in a callback function if you need to do different things with the array in different places.
Thank you for your reply, but the problem remains the same, how can I then return value from processData ? because once I have parsed the JSON object, I toggle class of computed elements of the page (by also parsing them) and I have to reparse the processData() result to set values on each toggled element
@Jerec: You need to alter your logic. You cannot return anything. You have to toggle the classes inside the callback function.
The problem is that, since this is an asycronous call, alert(items); will execute before $.getJSON gets a chance to populate it, so items will be empty at that time. As Rocket suggests, you need to do your work in a callback, so that you are sure to have the data retrieved by the ajax call.

user447356 · Accepted Answer · 2011-08-04 13:39:40Z

3

Just have the code inside the callback:

function processJSON(data) {
    var retval = [];
    $.each(data, function(key, val) {
        retval.push(val); 
    });
    $('td').each(function(index) {
        if (index < retval.length)
            $(this).attr('bgcolor', retval[index]);
    });
}

answered Aug 4, 2011 at 13:39

user447356

Collectives™ on Stack Overflow

Return a value with jQuery each() function

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related