0

I am new to both stackoverflow and javascript(especially jquery and ajax). I have been trying to solve this problem from over a day and still cannot solve it. So I am trying to get a list of image names from a folder with this:

folder = 'image/';
function imageCollection(theImageList) {
    $(document).ready(function () {
        $.ajax({
            url: folder,
            success: function (data) {
                $(data).find("a").attr("href", function (i, val) {
                    if (val.match(/\.(jpe?g|png|gif)$/)) {
                        $("#comparison").append("<img src='" + folder + val + "'>");
                          theImageList.push(folder+val);

                    }
                });
            }
        })
    })
}

imageCollection(theImageList)
var imgLength = theImageList.length; // returns 0 while if I type theImageList.length directly in the console it shows 54

I set theImageList global variable. It's very strange that when I type theImageList in the console, it shows that the length is 54 and I can access each file name with no problem. However, when I set var imgLength = theImageList.length (after my function of reading files) it gave me 0 and when I tried to access element, say theImageList[0], it returns undefined. Similarly, my images were shown to be added to my comparison div successfully, but when I tried to access them through $('img') outside of the function, again failure. I also tried return theImageList in my function but again failure.

So at this point I am really confused as to what happened to my code. It shows signs of working but still does not give me what I have been looking for. I am not what is the right question to ask here. Any suggestions are welcome!

hahaha1234
  • 21
  • 2
  • 2
    to my knowledge, you need not have $(document).ready(function () as you wrote this inside a function. Usually, your function should be inside $(document).ready(function () not the other way around. – Jayanth Feb 18 '18 at 05:57
  • You have to wait for the async call to be completed before you can get the "theImageList.length". Till the async call returns, i.e. immediately after the async call, "theImageList.length" will have a 0 value. See the link mentioned above as duplicate, for solution. – Ari Singh Feb 18 '18 at 06:12
  • Think about it - the success handler runs not one but two threads removed from the thread in which `imageCollection()` is called. That's one thread for `$(document).ready()` and one for `$.ajax()`. – Roamer-1888 Feb 18 '18 at 06:15
  • @AuxTaco I've seen that question proposed as a duplicate many times. Unfortunately, most of the answers to that question are poor quality and either fail to explain or overcomplicate the essential issue, which is the order of execution. If any one knows of a better duplicate question/answer it would be good to know about it. – Michael Geary Feb 18 '18 at 09:15
  • @hahaha1234 The problem is here the _order_ in which things happen. The reference to `theImageList.length` at the end of your code happens _before_ the `success` callback runs. If you sprinkle `console.log()` calls throughout your code, you will see the actual order of execution. Basically, you need to access `theImageList` either from inside the `success` callback or in another function you call from that callback. – Michael Geary Feb 18 '18 at 09:18
  • @Jayanth You are right, this is an unusual use of the `.ready()` callback, although it isn't necessarily incorrect. It would be more typical to put all this code inside the `.ready()` callback, or else to not bother with `.ready()` at all if this code runs after the DOM elements in question have been created (e.g. by putting the code at the end of the `body`). – Michael Geary Feb 18 '18 at 09:23

0 Answers0