Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript AJAX Basics (retiring) Programming AJAX Processing JSON Data

Tracy Excell
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points
Posted by Tracy Excell
.a{fill-rule:evenodd;}techdegree seal-36
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,268 Points
Emmanuel Molina
Emmanuel Molina
9,268 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,943 Points
Steve Gallant
Steve Gallant
14,943 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
Sanderijn Hellwich
Sanderijn Hellwich
12,951 Points

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

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