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

Code Not Showing

I tried the challenge but when I click preview, nothing shows up for both the employee list and room list. I went into the console but it showed no errors in there either. What's wrong with the code?

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 xhrRoom = new XMLHttpRequest;

xhr.onreadystatechange = new function(){
  if (xhrRoom.readyStage === 4){
    var room = JSON.parse(xhrRoom.responseText);
    var HTMLRoom = '<ul class="rooms">';

    for (var i = 0; i<room.length; i++){
      if (room[i].available === true) {
        HTMLRoom += '<li class="empty">';

      } else {
        HTMLRoom += '<li class="full">';
      }
      HTMLRoom += room[i].room;
      HTMLRoom += '</li>';
    }
    HTMLRoom += '</ul>';
    document.getElementById("roomList").innerHTML(HTMLRoom);
  }
}
xhrRoom.open("GET", "../data/rooms.json");
xhrRoom.send()

3 Answers

I can't access your code, but please, take time to review your code, following lines are wrong :

this :

xhr.onreadystatechange = new function(){

should be

xhr.onreadystatechange = function(){

this :

if (xhrRoom.readyStage === 4){

should be

if (xhrRoom.readyState === 4){

this :

document.getElementById("roomList").innerHTML(HTMLRoom);

should be

document.getElementById("roomList").innerHTML = HTMLRoom;

You also didn't add semi-colon to the end of xhr.onreadystatechange statement, same thing for xhr.send statement.

Pay attention at what you write and think to use the console to understand where are the problems.

Thank you! sorry for the trouble, I was confused when the console wasnt giving me any messages. Sorry about my silly mistakes.

Hi,

Did you opened the browser console to verify if there was errors ?

I noticed that you've not instantiated correctly your second ajax request :

var xhrRoom = new XMLHttpRequest;

should be

var xhrRoom = new XMLHttpRequest();

I corrected that mistake but nothing is still showing up. I went into the console and the only message I receive is

widget.js:20 XHR finished loading: GET "http://port-80-ewk95qxivf.treehouse-app.com/data/employees.json".

widget.js:44 XHR finished loading: GET "http://port-80-ewk95qxivf.treehouse-app.com/data/rooms.json".

I know i am a bit late, but the "xhr.onreadystatechange = function(){" The "xhr." portion was used in the first list as it was the variable, here you have it listed again under the 2nd list which, Is it possible that this needed to have been "xhrRoom" instead?