JavaScript AJAX Basics (retiring) Programming AJAX Processing JSON Data

Can't figure out what's wrong with my code

Console shows no error but the code's still not working.

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

The console doesn't even recognise the employee variable.

Here's the image of that weird error that's popping up the console

JP Chaufan Field
JP Chaufan Field
1,655 Points

maybe the readyState does not == 4? i might try printing out the readyState to see what numbers its being changed to

Mark Casavantes
Mark Casavantes
Pro Student 13,401 Points

Hi Anuj,

This line has a missing semi-colon. statusHTML += '<li class="out">'

See if that works.

Mark

Rokas Mazeika that part's there in the workspace but somehow got skipped in the question. I've updated my post now so I'd like you to take another look at it. I could really use another pair of eyes cos I can't find an error.

JP Chaufan Field, followed your advice and I'm even more confused as the console refuses to recognise xhr.readyState. Really can't figure out what's wrong with the code.

Mark Casavantes, I added that semi-colon but it still didn't work :/

2 Answers

Rokas Mazeika
Rokas Mazeika
4,243 Points

your missing the document.getElementById('employeeList').innerHTML = statusHTML; in if statment

Rokas Mazeika
Rokas Mazeika
4,243 Points

maybe u didn't put <script src="js/widget.js"></script>

if not then try my code

var xhr =  new XMLHttpRequest();
xhr.open("GET", "data/employees.json")
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var employee = JSON.parse(xhr.responseText);
    var statushtml = '<ul class="bulleted">'
    for (var i = 0; i < employee.length; i++) {
      if (employee[i].inoffice === true) {
        statushtml += '<li class="in">'
      } else {
        statushtml += '<li class="out">'
      }
      statushtml += employee[i].name
      statushtml += "</li>"
    }
    statushtml += "</ul>"
    document.getElementById("employeeList").innerHTML = statushtml;
  } 
}
xhr.send();