JSON Question

Looping through a JSON file with JavaScript but getting undefined output

I am to obtain some JSON notation from a server and present it on a site using XMLHttpRequest();.

This is the file - http://www.adweb.agency/interview/api/animals

I have acquired the data and I can view it on my browser. But when I try to put it into a html table I get a table full of undefined stuff. I have spent at least 10 hours reading up on JSON notation and I have a good understanding of how it works, yet my data is still undefined. When I compare it to examples on w3schools I see no difference in our code. The problem appears to occur when I attempt to loop through the data, trying to get it part by part. Some examples i have studied show that the data usual has some sort of array name. I see no array name in the data as i view it directly in my browser from their server. I am to use JavaScript and I am not permitted to use JQuery. This suits me as I am here to learn, not to simply get the job done. Here is my function.

function loadAnimals() {
var animals = new XMLHttpRequest();
animals.open("GET", "http://www.adweb.agency/interview/api/animals", true);
animals.onreadystatechange = function () {
if (animals.readyState == 4 && animals.status == 200) {
var animalObject = JSON.parse(animals.responseText);
var table = "<table>";
var i;
for (i = 0; i < animalObject.length; i++) {
table += "<tr>" +
"<td>" + animalObject[i].Title + "</td>" +
"<td>" + animalObject[i].Description + "</td>" +
"<td>" + animalObject[i].Family + "</td>" +
"<td>" + animalObject[i].CollectiveNoun + "</td>" +
"</tr>";
}
table += "</table>";
document.getElementById("animals").innerHTML = table;
}
}
animals.send(null);
}

Answer

Hi there is one simple mistake u did

 function loadAnimals(){ 

          var animals = new XMLHttpRequest(); 
          animals.open("GET", "http://www.adweb.agency/interview/api/animals", true ); 

   animals.onreadystatechange = function(){      

                                 if ( animals.readyState == 4 && animals.status == 200 )  {

                                    var animalObject = JSON.parse(animals.responseText);
                                    var animallength = JSON.parse(animalObject)

                                    var table = "<table>";
                                    var i;

                                    for( i = 0; i < animallength.length ; i ++ ) {

                                         table += "<tr>" +
                                        "<td>" + animallength[i].Title + "</td>" +
                                        "<td>" + animallength[i].Description + "</td>" + 
                                        "<td>" + animallength[i].Family + "</td>" +
                                        "<td>" + animallength[i].CollectiveNoun + "</td>" +
                                        "</tr>";
                                        }

                                        table += "</table>";
                                        document.getElementById("animals").innerHTML = table;

                                       }
                                     }
                           animals.send(null);    
                         }   

u have to parse and store in a variable use that length , i tied this works for me so try and replace the function above