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

Franklin Colbert
Franklin Colbert
4,868 Points
Posted by 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
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
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
24,848 Points
Oğulcan Girginc
Oğulcan Girginc
24,848 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
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
24,848 Points
Oğulcan Girginc
Oğulcan Girginc
24,848 Points

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