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".

Binu David
Binu David
7,561 Points

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?