JavaScript AJAX Basics (retiring) Programming AJAX Processing JSON Data

Tracy Excell
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points

HTML content not showing on preview, what have I missed?

I have worked through this section on workspaces, however the HTML for the in / out of office does not show on preview. I can not see a mistake when comparing it to the teachers code. Can anyone see where I have gone wrong?

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




  HTML  

      <!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8">
  <title>AJAX Office Status Widget</title>
  <link href='//fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/main.css">
   <script src="js/widget.js"></script>
 </head>
  <body>
  <div class="grid-container centered">
   <div class="grid-100">
    <div class="contained">
    <div class="grid-100">
      <div class="heading">
        <h1>Corporate Intranet</h1>
      </div>
    </div>
    <section class="grid-70 main">
      <h2>Lorem Ipsum Headline</h2>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem 
     ae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
    </section>
    <aside class="grid-30 list">
      <h2>Employee Office Status</h2>
      <div id="employeeList">

      </div>
    </aside>
    <footer class="grid-100">
      <p>Copyright, The Intranet Corporation</p>
    </footer>
  </div>
   </div>
  </div>
    </body>
  </html>

2 Answers

Emmanuel Molina
Emmanuel Molina
9,265 Points

It's seems your path to access your JSON file is wrong. Try xhr.open('GET', '../data/employees.json'); because you wrote the script in js/widget.js and the JSON file is in data/employees.json, you must back one level to access it.

Steve Gallant
Steve Gallant
14,874 Points

My path is same as the OP - "data/employees.json" - and works fine. I'm not seeing any other error, though.

Sanderijn Hellwich
Sanderijn Hellwich
12,951 Points

It looks like you misspelled employees in the below line of code:

if (employess[i].inoffice === true)