JavaScript AJAX Basics (retiring) Programming AJAX Stage 2 Challenge

Franklin Colbert
Franklin Colbert
4,868 Points

My XHR request seems to be opening the wrong file

The widget keeps displaying all the meeting rooms as undefined. When I console.log the object it is opening, it keeps opening the file containing the employee data, instead of the room data. (Also, I cant get this to display my code in markdown).

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

    //console.log(statusHTML);
    document.getElementById('employeeList').innerHTML = statusHTML;
  }
};
xhr.open('GET', 'data/employees.json');
xhr.send();


var xhr2 = new XMLHttpRequest();
xhr2.onreadystatechange = function () {

  if(xhr2.readyState === 4 && xhr2.status === 200) {
    var rooms = JSON.parse(xhr2.responseText);
    console.log(rooms);
    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;
  }
};
xhr2.open('GET', '../data/rooms.json');
xhr2.send();

2 Answers

Steven Bister
Steven Bister
12,011 Points

Hey,

From looking at what you've posted above I think it's that you haven't referenced your xhr2 variable when asking your program if the status is equal to 200 or when you're parsing the response text. At the moment it looks like you're asking it to look at your xhr variable. Which might be why it's opening the employee data instead. Try this:

if(xhr2.readyState === 4 && xhr2.status === 200) { var rooms = JSON.parse(xhr2.responseText); console.log(rooms); 

Hope that helps!! Steve

Franklin Colbert
Franklin Colbert
4,868 Points

that did it! I rewrote it without declaring the variables globally too, hopefully that will help me avoid this next time Thanks!

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

    //console.log(statusHTML);
    document.getElementById('employeeList').innerHTML = statusHTML;
  }
};
xhr.open('GET', 'data/employees.json');
xhr.send();


var xhr2 = new XMLHttpRequest();
xhr2.onreadystatechange = function () {

  if(xhr2.readyState === 4 && xhr2.status === 200) {
    rooms = JSON.parse(xhr2.responseText);
    console.log(rooms);
    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;
  }
};
xhr2.open('GET', '../data/rooms.json');
xhr2.send();
Oğulcan Girginc
Oğulcan Girginc
23,373 Points
"I rewrote it without declaring the variables globally"

I think declaring variables in a function without using var keyword makes them global variables.

Source: Stackoverflow

Franklin Colbert
Franklin Colbert
4,868 Points

So when I declare a variable using var inside a function, it is a local variable to that function?

Oğulcan Girginc
Oğulcan Girginc
23,373 Points

To my understanding; that's how it works. However, I am not an expert. :)