Employee list is not displayed correctly

//Step 1: create XHR request
var xhr = new XMLHttpRequest();

//Step 2: create call back / event handler
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {

    //parse returned string of responseText to transform to JavaScript
    const employees = JSON.parse(xhr.responseText);

    //create statusHTML variable w/ul element 
    const statusHTML = '<ul class="bulleted">';

    //for loop to go through JSON list of employees 
    for (var i=0; i<employees.length; i++) {
      if (employees[i].inoffice === true) {
          //add class (in or out) to statusHTML; as reminder, += means take current value & add something to it, so add list item w/this class if true
          statusHTML += '<li class="in">';
    } else {
          statusHTML += '<li class="out">';
          }
        //add employees name to statusHTML
        statusHTML += employees[i].name;

        //add closing </li> tag to statusHTML
        statusHTML += '</li>';
      }

    //add closing </ul> tag to statusHTML
    statusHTML += '</ul>'; 

    //selected div tag by "employeeList" ID, & insert innerHTML that = statusHTML
    document.getElementById("employeeList").innerHTML = statusHTML;
  }
};

//Step 3: open request
xhr.open("GET", "data/employees.json");

//Step 4: send request
xhr.send();