Arraylength 0 but 13 objects in array

Question

Javascript: I have a dynamically filled array named resultsAuthor, when I log this object, I get this. (logged it because I need the length to loop through the object and this wasn't working) 1 But when I try to log resultsAuthor.length, I get 0. Anyone know what I'm doing wrong?

This is in my utils.js

From there I call it in my main.js like this:

var searchCriteria = document.querySelector('[title="tbxZoeken"]').value;
var searchAuthor = new Utils.GetBookinfoByAuthor(searchCriteria);
var resultsAuthor = searchAuthor.loadData();

console.log(resultsAuthor); // returns the object
console.log(resultsAuthor.length); // returns 0

Thanks!

Answer 1

Your ajax call has probably not finished loading when you print resultsAuthor.length, so it return 0. If you print resultAuthor this is still a reference to the original variable, so it gets printed correctly.

To fix this you can use a callback function or a promise. With a callback you could do something like this:

In your utils.js

GetBookinfoByAuthor: function (auteur) {
    //...
    this.loadData = function(callback) {

       // Rest of your code...

       // Request returned sucessfully
       if (xhr.status === 200) {

          //Rest of your code....               

          for (var i = 0; i  < data.length; i++) {
            // add all books to array
          }

       // All books a loaded
       callback(books)
    }
   }
}

In your main.js

var searchCriteria = document.querySelector('[title="tbxZoeken"]').value;
var searchAuthor = new Utils.GetBookinfoByAuthor(searchCriteria);
searchAuthor.loadData(function() {
  console.log(resultsAuthor);
  console.log(resultsAuthor.length);
});