Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript AJAX Basics (retiring) Programming AJAX Stage 2 Challenge Answer

rajbee
rajbee
6,657 Points
Posted by rajbee
rajbee
6,657 Points

Room list is not displayed correctly

Room numbers are displayed, but the status is not. Why ?

var xhr1 = new XMLHttpRequest();

xhr1.onreadystatechange = function() {
  if(xhr1.readyState === 4 && xhr1.status === 200) {
    var rooms = JSON.parse(xhr1.responseText);
    var room;
    var room_num;
    var available;

    var roomStatusHtml = '<ul class="bulleted">';

    for(var i = 0; i < rooms.length; i++) {
      room = rooms[i];
      room_num = room.room;
      available = room.available;

      if(available === true) {
        roomStatusHtml += '<li class="empty">' + room_num + '</li>';
      }else {
        roomStatusHtml += '<li class="full">' + room_num + '</li>';
      }
    }
    roomStatusHtml += '</ul>';
    document.getElementById('roomList').innerHTML = roomStatusHtml;
  }
};

xhr1.open('GET', '../data/rooms.json');
xhr1.send();

4 Answers

akak
akak
29,446 Points
akak
akak
29,446 Points

Hi,

You have wrong ul class there. Change it to:

  var roomStatusHtml = '<ul class="rooms">';

and it should work :)

rajbee
rajbee
6,657 Points
rajbee
rajbee
6,657 Points

I rectified that and it still works incorrectly.

Andrew Chung
PLUS
Andrew Chung
Courses Plus Student 4,094 Points
Andrew Chung
Andrew Chung
Courses Plus Student 4,094 Points

Hey Rajesh. Not sure if the workspaces ever act up, but maybe try relaunching the one for this project. I copy/pasted your code with akak's correction and it's displaying correctly on my end.

rajbee
rajbee
6,657 Points
rajbee
rajbee
6,657 Points

looks like a problem with the workspace. sometimes, clearing the history helps. this time it did not.

Unsubscribed User
PLUS
Unsubscribed User
Courses Plus Student 7,294 Points
Unsubscribed User
Unsubscribed User
Courses Plus Student 7,294 Points

Hi Rajesh, The ul class of the roomStatus HTML should be "rooms"

Ryan Mayo
Ryan Mayo
23,604 Points
Ryan Mayo
Ryan Mayo
23,604 Points

I think it is this: The way the code displays is different from the employee list. If you look at the instructor's example (pause around 2:32) you will see that his version only shows the room number inside a colored div with rounded edges. If you want to display the status too you would do something like"

if(available === true) {
    roomStatusHtml += '<li class="empty">' + room_num + " empty"+ '</li>';
}else {
    roomStatusHtml += '<li class="full">' + room_num +  " full"+ '</li>';
}