0

I have a procedure which makes a few ajax requests in a loop, each time appending the data to a global array.

After the procedure ends, I try to output the global array's contents on the console and it works fine: I can see a list of objects in Chrome console.

But right in the next line I try to print the length of that array, but it shows 0. I am also unable to access any element of the array using an index.

I know that JS will sometimes execute the statements outside the AJAX request while the request is finishing, but that's not what's happening here. In my case the AJAX requests are completed, and successfully fill the pictures array with the data I need. And yet the next line is showing a length of zero.

Here's the code snippet:

var venues = **some array**
var pictures = [];

function() {  
    // Get 2 picture urls for each venue
    for(var i=0; i<venues.length; i++) { 
      var venue = venues[i];
      var new_url = **valid url**

      $.ajax({
        url: new_url
      }).done(function(data) {
          var pics = data.response.photos.items;
          pictures.push(pics[0]);
          pictures.push(pics[1]);
        }).fail(function() {
        console.log('Images failed!');
      });
    }; //loop ends

console.log(pictures); <-- Shows a legit array of all the objects I expected
console.log(pictures.length); <-- Shows zero!!!
zeo
  • 68
  • 10
  • 1
    Javascript may execute the bottom two lines even before the ajax return the result. That is why you are getting 0 – Vineesh Jul 28 '17 at 12:12
  • The place where you have written: console.log(pictures); console.log(pictures.length) Are you sure you are getting right value of pictures array? – Nitesh Jul 28 '17 at 12:15
  • @Vineesh that's not the case here. The second-last statement outputs a legit array with 6 objects in it. – zeo Jul 28 '17 at 12:15
  • @Nitesh yes! I have it on the console with 6 elements. – zeo Jul 28 '17 at 12:16
  • 1
    You'll see the console log will says "evaluated just now", which means it's not showing you the actual state of `pictures` when the console log was first fired. – evolutionxbox Jul 28 '17 at 12:18
  • That's quite strange. ideally, it should be empty only. Can you show your full code? – Nitesh Jul 28 '17 at 12:19
  • @Nitesh sure, how can I do that in comments? – zeo Jul 28 '17 at 12:20
  • @zeo read the comment by evolutionxbox. To be sure you can do `console.log(JSON.stringify(pictures));` – George Jul 28 '17 at 12:23
  • @George yes that returns an empty array! It's surprising, if I simply console-log the array then it shows elements inside it. Why do you think that happens? – zeo Jul 28 '17 at 12:24
  • 1
    @zeo it's showing you the current state of that object as it holds a reference to the object and not that actual value of it. – George Jul 28 '17 at 12:25
  • @George I see, will have to do some reading into this phenomenon. Thanks! – zeo Jul 28 '17 at 12:27
  • @zeo it's not a phenomenon, it's the intended behaviour. [Glad I could help, this should help you a little more](https://stackoverflow.com/questions/23429203/weird-behavior-with-objects-console-log) – George Jul 28 '17 at 12:29

0 Answers0