JavaScript AJAX Basics (retiring) Programming AJAX Processing JSON Data

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

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

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

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

Mohamoud Dandan
Mohamoud Dandan
7,133 Points

i did this correction but still not working thank you anyway

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!