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
Corey Carter
21,593 PointsJSON Employee Office Status Example
I am working through this example line by line and don't see where I am going wrong. I go to preview the page but the JSON data does not populate at all. Is there something I am missing?
Here's what I have so far:
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(employees[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();
2 Answers
Ken Alger
Treehouse TeacherCorey;
Two differences I have in my code (see below), I'm not entirely sure my code is at the exact same point as you are, but it appears it is rather close.
//----------- Employee Office Status -----------
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(xhr.readyState === 4 && xhr.status === 200) {
var employees = JSON.parse(xhr.responseText);
var statusHTML = '<ul class="bulleted">';
for (var i=0; i<employees.length; i += 1) {
if (employees[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();
Best of luck, Ken
Ken Alger
Treehouse TeacherCorey;
Try putting a ../ before the 'data/employees.json' in your xhr.open line.
Ken
Corey Carter
21,593 PointsHi Ken,
Thank you for your quick response. I added the ../ to move up a level but it still will not populate the JSON data. I've tried everything from clearing my browser's(chrome) cache to copying line by line the what the instructor has and still it does not populate.
Corey Carter
21,593 PointsCorey Carter
21,593 PointsFOUND THE PROBLEM! I wasn't adding statusHTML to statusHTML. I was overriding because I forgot the '+' sign. Thank you! I would have been up all night over this.