JavaScript AJAX Basics (retiring) Programming AJAX Stage 2 Challenge

S Ananda
S Ananda
9,474 Points

Get room numbers, but no status.

When I open the preview window it shows a list of the rooms, but it doesn't show the availability. I've been over the code and other's questions and can't see my error. Ir's usually something silly, but I just can't see it. What's wrong?

S Ananda
S Ananda
9,474 Points

It didn't copy my code so here it is.

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if(xhr.readyState === 4 && xhr.status === 200) {
    var employees = JSON.parse(xhr.responseText);
    var statusHTML = '<ul class="bulleted">';
    for (var i=0; i<employees.length; i += 1) {
      if (employees[i].inoffice === true) {
        statusHTML += '<li class="in">';
      } else {
        statusHTML += '<li class="out">';
      }
      statusHTML += employees[i].name;
      statusHTML += '</li>';
    }
    statusHTML += '</ul>';
    document.getElementById('employeeList').innerHTML = statusHTML;
  }
};
xhr.open('GET', '../data/employees.json');
xhr.send();

var rooms = new XMLHttpRequest();
rooms.onreadystatechange = function(){
  if(rooms.readyState === 4 && rooms.status === 200){
    var roomNumber = JSON.parse(rooms.responseText);
    var roomAvail = '<ul class="bulleted">';
    for (var i=0; i<roomNumber.length; i += 1) {
      if (roomNumber[i].available === true) { 
        roomAvail += '<li class="available">';
      } else {
        roomAvail += '<li class="booked">';
      }
      roomAvail += roomNumber[i].room;
      roomAvail += '</li>';
    }
     roomAvail += '</ul>';
    document.getElementById("roomList").innerHTML = roomAvail;
  }
};
  rooms.open('GET', '../data/rooms.json');
  rooms.send();

Can you post a snapshot of your workspace? That could make it easier to troubleshoot.

4 Answers

Joel Bardsley
Joel Bardsley
31,218 Points

Hey, if you rewatch the video you'll notice the HTML for this challenge uses li classes of 'full' and 'empty' instead of 'booked' and 'available'. Make those small changes and you should be good to go!

S Ananda
S Ananda
9,474 Points

Still didn't work...

All I did was change the class "available" to "empty" and the class "booked" to "full". Still get the rooms, but no availability status.

Joel Bardsley
Joel Bardsley
31,218 Points

If you look in the CSS file and search for class names 'full' and 'empty' you'll see the styles are associated with an ul with a class of 'rooms' instead of 'bulleted' - updating this class should give you the correct styles for the room numbers.

This detail looks to have been left out of the video, but is included in the teacher's notes underneath.

S Ananda
S Ananda
9,474 Points

Thanks for the info Jason. I could have driven myself crazy with this exercise. I've looked at it so long I think it is burned into my memory, lol. And a special thanks to Joel for helping me see the errors and little details I missed (and I pride myself in being so detail oriented, arg).

You're welcome.

Please consider marking Joel's answer "Best Answer". This will let others know that the problem is solved.

S Ananda
S Ananda
9,474 Points

Hi Joel, Things definitely changed, but are still not right. I now have all the room numbers in red and green boxes. I think I'm supposed to have red and green boxes that say 'full' and 'empty', with room numbers next to them. I may need to switch my variables but cannot check that right now, as I'm getting ready to go out. It seems like everything is done the same as the first example, but maybe I need to reverse the two variables. I'll try it tomorrow and see what happens

You're good to go then.

The only 3 problems you had were the 3 class names that Joel pointed out.

In the next video, the instructor will code the solution and you'll see that your page looks the same as his. It's only supposed to be the numbers in the red and green boxes.