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 Ahlander
Ben Ahlander
7,528 Points
Posted by Ben Ahlander
Ben Ahlander
7,528 Points

Why is my list of employees not populating?

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();

3 Answers

Samuel Zhen
Samuel Zhen
33,571 Points
Samuel Zhen
Samuel Zhen
33,571 Points

You select the wrong element. It should be

document.getElementById('employeeList').innerHTML = statusHTML;

You forgot to uppercase L letter. That's why the script can't find the element to display the list.

Don't forget to use the console at developer tools. It helps :)

Mohamoud Dandan
Mohamoud Dandan
7,133 Points
Mohamoud Dandan
Mohamoud Dandan
7,133 Points

i have the same situation here please i need your help var xhr = new XMLHttpRequest();

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.lenght; i += 1) { if (employees[i].inoffice === true) { statusHTML += '<li class="in">'; }else{ statusHTML +='<li class="out">'; } statusHTML += employess[i].name; statusHTML +='</li>'; } statusHTML += '</ul>'; document.getElementById('employeeList').innerHTML = statusHTML; } };

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

Samuel Zhen
Samuel Zhen
33,571 Points

It should be employees.length in your for loop. Check again.

Mohamoud Dandan
Mohamoud Dandan
7,133 Points
Mohamoud Dandan
Mohamoud Dandan
7,133 Points

i did this correction but still not working thank you anyway

Samuel Zhen
Samuel Zhen
33,571 Points

Hey, Mohamoud Dandan Try this

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();

You wrote statusHTML += employess[i].name;. It should be employees, not employess

Hope it works!