javascript array item undefined

Question

I don't understand why I can print out console.log(imgs) but I can not print out console.log(imgs[0])

$(function() {
    var imgs = [];
    var dir = "images/";
    var fileextension = ".png";

    $.ajax({
        url: dir,
        success: function (data) {
            $(data).find("a:contains(" + fileextension + ")").each(function () {
                var filename = this.href.replace(window.location.host, "").replace("http://", "");
                imgs.push(dir+filename);
            });
        }
    });

    console.log(imgs);//ok
    console.log(imgs[0]);//undefined
    //$('body').css({'background-image': 'url(images/' + imgs[Math.floor(Math.random() * imgs.length)] + ');'});
});

Clarify: console.log(imgs[0]) shows what? Undefined? if so this is running before your ASYNC imgs.push() is done. Put the console.log(imgs[0]) after imgs.push() so it fires after that step is done — Elim Garak, Jul 27 '16 at 14:14
It's `undefined` because the array is empty, so there is no first element...? — J. Titus, Jul 27 '16 at 14:17

score 1 · Answer 1 · answered Jul 27 '16 at 14:17

The ajax method is async, so you need to use a callback function to use the imgs variable after the ajax call. Or you can move your code inside the success function, like this:

$(function() {
    var imgs = [];
    var dir = "images/";
    var fileextension = ".png";
    $.ajax({
        url: dir,
        success: function (data) {
            $(data).find("a:contains(" + fileextension + ")").each(function () {
                var filename = this.href.replace(window.location.host, "").replace("http://", "");
                imgs.push(dir+filename);
            });

            console.log(imgs);//ok
            console.log(imgs[0]);//undefined
            //$('body').css({'background-image': 'url(images/' + imgs[Math.floor(Math.random() * imgs.length)] + ');'});
        }
    }); 
});

score 1 · Answer 2 · answered Jul 27 '16 at 14:17

1

That's because Ajax is asynchronous and JavaScript is synchronous.

You need to console.log in the success callback function.

answered Jul 27 '16 at 14:17

Rahul Arora

4,503
1
16
24

score 0 · Accepted Answer · answered Jul 27 '16 at 14:17

By default $.ajax run asynchronously. If you add more console logs like in this example:

$(function() {
var imgs = [];
var dir = "images/";
var fileextension = ".png";
console.log('telling jquery to load some data')
$.ajax({
    url: dir,
    success: function (data) {
        console.log('data loaded');
        $(data).find("a:contains(" + fileextension + ")").each(function () {
            var filename = this.href.replace(window.location.host, "").replace("http://", "");
            imgs.push(dir+filename);
        });
        console.log('data parsed');
    }
});

console.log("try to print images", imgs[0]);
//$('body').css({'background-image': 'url(images/' + imgs[Math.floor(Math.random() * imgs.length)] + ');'});
});

You will see that when you tries to print imgs[0] ajax not yet loaded.

javascript array item undefined

3 Answers3