0

the weirdest thing happened to me just now. In the second ajax call, the data[i]['imdb'] returns the value of the key 'imdb' from a json object. however, i found out that, at the bottem of this code snippet, the data[i] is undefined. 

   function fillallmovies() {
  $.ajax({
    url: "resources/movies",
    dataType: "json",
  }).fail(function (jqXHR, textstatus) {
    alert(textstatus);
  }).done(function (data) {
      console.log(data);
      for (var i = 0; i < data.length; i++) {
        $.ajax({
          url: 'http://www.omdbapi.com/?i=' + data[i]['imdb'] + '&t=',
        }).fail(function(jqXHR, textStatus) {
          alert(jqXHR.responseText);
        }).done(function (ajaxdata) {
          var json = JSON.parse(ajaxdata);
          var image = (json['Poster']);

          var elem = $('#moviecontainer');
          var col = $('<div/>', {'class': 'col-sm-6 col-md-4'});
          var thumbnail = $('<div/>', {'class': 'thumbnail' });
          var img = $('<img/>' , {'src' : image , 'class' : "showimage"});
          var caption = $('<div/>' , {'class' : 'caption'});
          console.log(data[i]['imdb']);
          var header = $('<h3/>').text(data[i]['title']);

my page can load the second ajax call using data[i]['imdb'], and it returns valid json. However the console.log(data[i]['imdb']) at the second to last line throws a Uncaught TypeError: Cannot read property 'imdb' of undefined.

Why is data suddenly undefined?

It has infact nothing to do with loops and ajax. Data is undefined because the first ajax call has already been finished and cleaned up when the second call callbacks to .done(). Hence when i try to call the data from the first ajax call, it is undefined.

user3761498
  • 25
  • 5
  • 4
    Related: [JavaScript closure inside loops – simple practical example](http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) – Ram Oct 25 '14 at 16:44
  • There are plenty of other answers as well if you Google [jquery ajax in a loop site:stackoverflow.com](https://www.google.com/search?q=jquery+ajax+in+a+loop+site%3Astackoverflow.com) –  Oct 25 '14 at 16:54
  • i tried wrapping it in a function, still the same result. Im not sure why this is named as duplicate, because my iteration works, but the type of data changes from object to undefined. – user3761498 Oct 25 '14 at 17:00
  • ...and that's because the value of `i` is not the same when you use it in the url and when you print it, just like the duplicate explains. If you've "fixed" it by wrapping it to a function and it still doesn't work, edit the question and someone can tell what the problem with that is. – JJJ Oct 25 '14 at 17:18
  • simple fix is use `$.each` which creates a closure, first argument is index same as `i` in `for` – charlietfl Oct 25 '14 at 18:34
  • I fixed it, i moved the ajax call to the end of the function. I can now extract the data[i]['title'] and then call the ajax function. I still dont understand why having the ajax call first makes data undefined. – user3761498 Oct 26 '14 at 13:16
  • Ran it by my teacher, the problem was that when the second ajax call finishes, the first one has already been cleaned up, hence why data is undefined. – user3761498 Oct 28 '14 at 13:06

0 Answers0