JavaScript AJAX Basics (retiring) Programming AJAX Processing JSON Data

Tracy Excell
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points
Posted by 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
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,873 Points
Steve Gallant
Steve Gallant
14,873 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
10,529 Points
Sanderijn Hellwich
Sanderijn Hellwich
10,529 Points

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

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