
amirbizimana
9,639 PointsCode where art thou ?
var xhrRoom = new XMLHttpRequest(); //step 1:
xhrRoom.onreadystatechange = function () {
if(xhrRoom.readyState === 4 && xhrRoom.status === 200) {
console.log(xhrRoom.responseText);
var rooms = JSON.parse(xhrRoom.responseText);
var roomsHTML ='<ul class="rooms">';
for (var i=0; rooms.length; i+=1){
if (rooms[i].available === true){
roomsHTML += '<li class="empty">';
}else {
roomsHTML += '<li class="full">';
}
roomsHTML += rooms[i].room;
roomsHTML += '</li>';
}
statusHTML += '</ul>';
document.getElementById('roomList').innerHTML = roomsHTML;
} // step 2:
};
xhrRoom.open('GET','../data/rooms.json'); //step 3
xhrRoom.send(); // step 4
console.log(xhrRoom.responseText);
Here is my code. When i preview it, nothing is showing. I checked the console and i get the following error: "Uncaught TypeError: Cannot read property 'available' of undefined". There seems to be something wrong with the way my object's value keys are being accessed ? Any feed back is greatly appreciated !
2 Answers

Nico Trivelli
20,355 PointsHi Amir Bizimana ,
Only a couple of things that I noticed there that hopefully can be of help.
Your counter i in the for loop is not included with the length of rooms appropriately.
It should be:
var i = 0; i < rooms.length; i+= 1
Also, when you closed the <ul> tag, you accidentally added it to a variable statusHTML, rather than to roomsHTML.
HTH.

amirbizimana
9,639 PointsHey Nico Trivelli, thanks so much for spotting the mistakes ! The code works perfect now !

Nico Trivelli
20,355 PointsNo problem.
Glad it worked!