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

Greg Wollf
Greg Wollf
12,463 Points
Posted by Greg Wollf
Greg Wollf
12,463 Points

Meeting Room Challenge Answer doesn't work

I copied the code out exactly as you have it and just to be sure I opened up the Stage 2 downloadable files and copy / pasted the completed challenge into Work Spaces. I get a the header that says "Meeting Rooms" above the Employee widget, but no rooms and no statuses.

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

im just guessing because you dont have the employee in/out code showing. however if you are using both the employee in/out widget plus the room available widget you would have to var. named statusHTML. if you call the 2nd var statusHTML1 or something of your choosing it should work for you. when i copied and pasted this is what happened to me and it took some time to figure it out. other then that the code looks good.

3 Answers

Joe Sleiman
Joe Sleiman
5,921 Points
Joe Sleiman
Joe Sleiman
5,921 Points

maybe you should put roomRequest.open('GET', 'data/rooms.json'); instead of roomRequest.open('GET', '../data/rooms.json'); and you should change the css file to the new one

Marcus Parsons
Marcus Parsons
15,719 Points
Marcus Parsons
Marcus Parsons
15,719 Points

Hey Greg Wollf,

Everything looks really good as far as your code goes. You did say you copied and pasted it so I expected that. I do have a couple questions, though, so we can see what the problem is: Is your JavaScript code coming from a folder called "js" or another location? The reason why I ask is that it's perfectly okay to put your JavaScript into another folder or even as a part of index.html itself, but it will change how you refer to that local JSON request, of course.

Also, you should have a folder called "data", can you look and make sure that you have the file names exactly the same in your code and in the actual file structure? I have, more than a few times, put something like "Rooms.json" instead of "rooms.json" for the file name, and then wonder for a while what was going on haha.

Bernardo Cassina
Bernardo Cassina
13,523 Points
Bernardo Cassina
Bernardo Cassina
13,523 Points

I copied your code in my editor and it worked just fine. Maybe there´s something wrong with your other files.