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 Answer

My code seems to be exactly the same as Dave's, and I've checked it on JSHint.com... So why isn't my code working?

As above, I've worked through this whole section of the AJAX course and it just doesn't seem to load. It looks exactly similar to Dave's, I checked it on JSHint.com and it had no errors whatsoever. I also checked in the console via the Google DevTools and its loading the JSON file fine... So why isn't the web page displaying properly?

My workspace link - https://teamtreehouse.com/workspaces/19757172

My code -

var xhr = new XMLHttpRequest();
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 roomRequest = new XMLHttpRequest();
roomRequest.onreadystatechange = function () {
  if (roomRequest.readyState === 4) {
    var rooms = JSON.parse(roomRequest.responseText);
    var statusHTML = '<ul class="rooms">';
    for (var i = 0; i < rooms.length; i++) {
      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();

(I've never posted in the forums before, but I believe I've formatted the code block above correctly to make it display in the editor-type style)

Thanks!

Jason Anders
Jason Anders
Treehouse Moderator 145,858 Points

Hey Ryan,

I corrected the formatting for the code block. You were on the right track, but it's actually backticks, not single quotes. The backtick button is usually the one just to the left of the number one key (top left corner). It also good to add the language right after the 3rd tick for the syntax highlighting.

I'm sorry I'm not actually able to help with the question. I'm really not that familiar with AJAX. :( But I'm sure someone will jump in and help you troubleshoot.

Keep Coding! :)

Jason - Treehouse Moderator :dizzy:

Jason Anders
Jason Anders
Treehouse Moderator 145,858 Points

Opps, forgot to mention. Links to your Workspaces won't work. Those are private and unique to your login session only. To share a Workspace, click on the camera icon in Workspaces (top-right) and create a snapshot, this will give a URL that can be shared. (Sometimes, you need to open the URL and then copy/paste from the address bar). :dizzy: :)

2 Answers

Hi, Ryan.

Sorry, I haven't taken this course in ages and don't really remember it, but just glancing at your code I see an issue. You aren't calling .open and .send on roomRequest, so the XMLHttpRequest that is defined in the roomRequest variable isn't doing anything. All that code just sitting there! Instead, you're calling .open and .send with xhr a second time, but this time you're making a GET request with the rooms.json file (which appears to be the wrong file for xhr), overwriting the initial xhr .open and .send. So, basically you've crossed your wires and broken both XMLHTTPRequests that you've defined. :p

Change the last two lines of your file to this:

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

Also, you only need to define var xhr once at the top of your file. It's typed out twice. Relatively harmless, but it's making two XMLHTTPRequests for no reason.

var xhr = new XMLHttpRequest();

Hopefully that helps. Happy coding!

P.S. It's helpful if you can mention the exact problem you're seeing in what you're coding.

Thanks Leslie, that's sorted it completely. I really appreciate it, I hate passing a course without actually passing it haha.

(Next time I'll post my exact error so its easier and quicker to understand the problem)