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 Processing JSON Data

Ben Rawlins
Ben Rawlins
9,093 Points
Posted by Ben Rawlins
Ben Rawlins
9,093 Points

Can't Load Employee Status using AJAX

I am not sure what I am doing wrong. The code I have is the same in video and on other forum posts, but the employee status won't load. When I click refresh there is NaNZac where the employee status should be. I checked the console and there were no errors.

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      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();

5 Answers

Brandon Barrette
Brandon Barrette
20,485 Points
Brandon Barrette
Brandon Barrette
20,485 Points

The error is in your else statement

statusHTML =+ '<li class="out">';

It's a simple type (I hate these!!!). Should be +=

statusHTML += '<li class="out">';
kevin jordan
kevin jordan
11,353 Points
kevin jordan
kevin jordan
11,353 Points

Hey Ben - I just glanced at your code and I would double check your if statement on the xhr.readtState. It might not be the problem, but I'm thinking that : (xhr.readyState === 4) should not be employing the triple equals. Try (xhr.readyState == 4) instead ! Best of Luck :) kj

Ben Rawlins
Ben Rawlins
9,093 Points
Ben Rawlins
Ben Rawlins
9,093 Points

The triple = are used in the video and in the project files. I paused the video and went through the code line by line to make sure it matched up. I thought it did, but I guess I am missing a very small detail. Thanks for the reply!

kevin jordan
kevin jordan
11,353 Points
kevin jordan
kevin jordan
11,353 Points

Hmmm - yeah, no dice there.... Looks like === is best practice ! Not sure how you've gone about trying to find the hang up , but if it was me, I'd start peppering my code with console.log statements within each of your conditionals and see which particular conditional is failing... Damn - thought I had it for ya :) ! Best, kj

Ben Rawlins
Ben Rawlins
9,093 Points
Ben Rawlins
Ben Rawlins
9,093 Points

Thanks Brandon! I knew it had to be something small I was overlooking.