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

rajbee
rajbee
6,657 Points
Posted by rajbee
rajbee
6,657 Points

Why is my code not working ?

The employees status is not displayed. Why ?

widget.js 

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">';
    var employee = {};
    var inOffice = {};
    var empName = {};

    for(var i=0; i< employees.length; i += 1) {
      employee = employees[i];
      empName = employee.name;
      inOffice = employee.inoffice;

      if(inOffice === true) {
        statusHTML += '<li class="in">';
      }else {
        statusHTML += '<li class="out">';
      }
      statusHTML += empName;
      statusHTML += '</li>';
    }
    statusHTML = '</ul>';
    console.log(statusHTML);
    document.getElementById('employeeList').innerHTML = statusHTML;
  }
};

//open a request
xhr.open('GET', 'data/employees.json');

//send a request
xhr.send();
Chyno Deluxe
Chyno Deluxe
16,936 Points

can you provide s snapshot of your work spaces please.

2 Answers

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

You have a very small typo, simply a single missing + sign that fixes it.

statusHTML += '</ul>';

This is the code just after the loop ends and, you also use the console to log your statusHTML which, as you have it without the plus, simply shows the UL because you have replaced all the data with a UL tag. By adding in the addition sign which appends the ul tag to the actual list everything works as expected. You were on the right track to figuring out the problem. Hope that helps.

Jamie Perlmutter
Jamie Perlmutter
10,955 Points
Jamie Perlmutter
Jamie Perlmutter
10,955 Points

In the inOffice variable when you add employee.inoffice, what are you trying to call there? Is inoffice a function or something previously stated? That could be causing a hiccup also everything is case sensitive so if it's capitalized then it will always need to be capitalized. So you may want to make sure everything is properly written. I'm on my phone right now I'll try to get on my computer and take a look and run your code see if I can narrow it down more

rajbee
rajbee
6,657 Points
rajbee
rajbee
6,657 Points

var inOffice should be a boolean. the json room object has a boolean property called inoffice (small O).