Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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');

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

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

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

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