Jquery binding loop variable to getJSON function

Question

I have a for loop that GETs a json array and populates it in a table along with another list's variables. My problem is I am not able to access i inside the get method. But I have mylist and all its contents inside. I tried binding the function to a variable i using bind(this,i) but that says .getJSON() is not a function. Here's the relevant code.

var mylist = ["a", "b", "c"]
for (i = 0; i < mylist.length; i++) {

    urlstr = "/" + mylist[i]; // Generate url
    $.getJSON(urlstr, function(data) {
        html = "<tr><td>" + mylist[i] + "</td><td>" + data.string[0] + "</td></tr>";
        $("#tableresult").append(html); //this returns undefined for mylist[i]
        console.log(i); //this returns 3 which is the length of list
    });

}

In short I need the variables outside getJSON be accessible within getJSON. Can someone please help? Thanks and regards.

The issue with i being 3 is that you loop over the items, calling getJSON, but before the first callback gets called, the loop is done already, resulting in i being 3 for each callback. — Guido Bouman
– Guido Bouman, Commented Mar 30, 2015 at 10:51

JLRishe · Accepted Answer · 2015-03-30 10:28:07Z

2

This should be no different from binding the loop variable in practically any other loop. Since you are working with an array, the cleanest approach is to use Array#forEach:

var mylist = ["a", "b", "c"];
mylist.forEach(function (item) {
    var urlstr = "/" + item;
    $.getJSON(urlstr, function(data){
         var html = "<tr><td>" + item + "</td><td>" + 
                    data.string[0] + "</td></tr>";
         $("#tableresult").append(html);
        console.log(item);
    });
});

answered Mar 30, 2015 at 10:28

JLRishe

102k19 gold badges138 silver badges171 bronze badges

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

10 Comments

Tania Over a year ago

This works well but supposing I have a few more variables outside getJSON and this function, how would I acces them inside?

Tania Over a year ago

Eg, i have another variable myvar=5 beside mylist. How would I access it inside?

JLRishe Over a year ago

@Tania You can just use it like you normally would. Shouldn't be a problem as long as its value isn't undergoing changes while the requests are taking place.

Tania Over a year ago

It says myvar is undefined @JLRishe

JLRishe Over a year ago

@Tania Could you show me the code where you're trying to use it?

|

Wahyu Kodar · Accepted Answer · 2015-03-30 10:24:17Z

1

please ensure your php return data is json.

for example:

$data['something'] = 'data';
echo json_encode($data);

and using function for get index (i):

 $.getJSON("demo_ajax_json.js", function(result){
        $.each(result, function(i, field){
            $("div").append(field + " ");
        });
    });

answered Mar 30, 2015 at 10:24

Wahyu Kodar

6741 gold badge6 silver badges15 bronze badges

1 Comment

Wahyu Kodar Over a year ago

okay, have you try : $.each(result, function(i, field){ $("div").append(field + " "); });

Collectives™ on Stack Overflow

Jquery binding loop variable to getJSON function

2 Answers 2

10 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related