
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 PointsHTML 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
9,265 PointsIt'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.

Sanderijn Hellwich
12,951 PointsIt looks like you misspelled employees in the below line of code:
if (employess[i].inoffice === true)
Steve Gallant
14,875 PointsSteve Gallant
14,875 PointsMy path is same as the OP - "data/employees.json" - and works fine. I'm not seeing any other error, though.