Array index not working from within $.get

Question

The program I'm working on has an array with a bunch of web addresses in it, e.g:

var urls = ["http://www.url.com/page1", "http://www.url.com/page2", "http://www.url.com/page3"];

Then I loop through this array in order to run some code based on each web address:

for (var i = 0; i < urls.length; i++) {
    $.get(urls[i], function(response) {
        console.log(urls[i]);
    });

I'm using the $.get to extract data from another page on the site, and my problem is that the console.log shows undefined? Even more strange is that if I pass url[1], or any value as a number into the console.log, then it returns the url from the array is intended?

Furthermore, if I just log the current for loop index like

console.log([i]);

then it just outputs 3, three times.

gaetanoM · Accepted Answer · 2017-09-05 21:40:20Z

1

You need a closure in order to preserve the i variable. The contest of the variable is global, and when the for ends the value is urls.length + 1. Instead, if you close the code in an IIFE you preserve the value of your variable because it gets a function scope.

With modern browsers you may use

let instead of var: declares a block scope local variable, optionally initializing it to a value.

Change:

for (var i = 0; i < urls.length; i++) {
$.get(url[i], function(response) {
    console.log(urls[i]);
});

To:

for (var i = 0; i < urls.length; i++) {
  (function (i) {
      $.get(url[i], function(response) {
          console.log(urls[i]);
      });
  })(i);

answered Sep 5, 2017 at 21:40

gaetanoM

42.1k6 gold badges45 silver badges63 bronze badges

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

Comments

EmptyArsenal · Accepted Answer · 2017-09-05 21:44:48Z

1

You have an asynchronous issue. When the inner function gets called, i === urls.length because the outer for loop has already finished.

for (var i = 0; i < urls.length; i++) {
    // The anonymous function won't get called until the for loop completes
    // and you get a response back from the url.
    $.get(urls[i], function(response) {
        // When this finally gets called, the for loop has already completed
        // and i === urls.length, AKA undefined
        console.log(urls[i]);
    });
}

You can use let to fix your issue:

for (var i = 0; i < urls.length; i++) {
    // This will scope the variable to this for loop.
    let url = urls[i];
    $.get(url, function(response) {
        console.log(url);
    });
}

edited Sep 5, 2017 at 21:44

answered Sep 5, 2017 at 21:42

EmptyArsenal

7,4964 gold badges40 silver badges66 bronze badges

1 Comment

Namaskar Over a year ago

or just change var i to let i

Collectives™ on Stack Overflow

Array index not working from within $.get

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related