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

Brett Cunningham
Brett Cunningham
3,251 Points

why is my code is producing list items that are undefined? I believe there is something wrong with my rooms[i].available

My Code Below:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if(xhr.readyState === 4 && xhr.status === 200) {
    var rooms = JSON.parse(xhr.responseText);
    var statusHTML = '<ul class="bulleted">';
    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;

   }
  };

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

2 Answers

Hey Brett,

First, let me ask you, is this snippet of code sitting on the same page as your code for the employees list? The code looks good.

Brett Cunningham
Brett Cunningham
3,251 Points

No, I created another js file called roomWidget.js and added another script in the html file to link to this js.. Could that be the error? It looks like it loaded except for the undefined part.

Try renaming your variables for the room JSON data to something else because when you create variables like that, you're creating in the global context, which means that they can be accessed by other parts of your code, including other scripts on the page. When you re-use the variables with other pieces of code, it can make things wonky. Here's what I did with my rooms JavaScript (see if this helps you):

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

Thanks Marcus that worked! Lesson learned... the only difference is that you made new variables for the statusHTML and the xhr object. I'll keep that in mind.

No problem! Also, there was a change to the unordered list in the rooms part, because its class should be "rooms" not "bulleted".

You could have reused those same variables if each section of code was wrapped within a function, because functions create local variables that are destroyed upon the ending of the function so you'd be safe re-using the code like so:

function getEmployeeData() {
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();
}

function getRoomData() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if(xhr.readyState === 4 && xhr.status === 200) {
    var rooms = JSON.parse(xhr.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;

   }
  };

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

//Call each function
getEmployeeData();
getRoomData();