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 trialJames Kim
11,918 PointsCode Not Showing
I tried the challenge but when I click preview, nothing shows up for both the employee list and room list. I went into the console but it showed no errors in there either. What's wrong with the code?
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();
var xhrRoom = new XMLHttpRequest;
xhr.onreadystatechange = new function(){
if (xhrRoom.readyStage === 4){
var room = JSON.parse(xhrRoom.responseText);
var HTMLRoom = '<ul class="rooms">';
for (var i = 0; i<room.length; i++){
if (room[i].available === true) {
HTMLRoom += '<li class="empty">';
} else {
HTMLRoom += '<li class="full">';
}
HTMLRoom += room[i].room;
HTMLRoom += '</li>';
}
HTMLRoom += '</ul>';
document.getElementById("roomList").innerHTML(HTMLRoom);
}
}
xhrRoom.open("GET", "../data/rooms.json");
xhrRoom.send()
3 Answers
kevinrambaud
5,734 PointsI can't access your code, but please, take time to review your code, following lines are wrong :
this :
xhr.onreadystatechange = new function(){
should be
xhr.onreadystatechange = function(){
this :
if (xhrRoom.readyStage === 4){
should be
if (xhrRoom.readyState === 4){
this :
document.getElementById("roomList").innerHTML(HTMLRoom);
should be
document.getElementById("roomList").innerHTML = HTMLRoom;
You also didn't add semi-colon to the end of xhr.onreadystatechange statement, same thing for xhr.send statement.
Pay attention at what you write and think to use the console to understand where are the problems.
kevinrambaud
5,734 PointsHi,
Did you opened the browser console to verify if there was errors ?
I noticed that you've not instantiated correctly your second ajax request :
var xhrRoom = new XMLHttpRequest;
should be
var xhrRoom = new XMLHttpRequest();
James Kim
11,918 PointsI corrected that mistake but nothing is still showing up. I went into the console and the only message I receive is
widget.js:20 XHR finished loading: GET "http://port-80-ewk95qxivf.treehouse-app.com/data/employees.json".
widget.js:44 XHR finished loading: GET "http://port-80-ewk95qxivf.treehouse-app.com/data/rooms.json".
Binu David
Front End Web Development Techdegree Student 11,990 PointsI know i am a bit late, but the "xhr.onreadystatechange = function(){" The "xhr." portion was used in the first list as it was the variable, here you have it listed again under the 2nd list which, Is it possible that this needed to have been "xhrRoom" instead?
James Kim
11,918 PointsJames Kim
11,918 PointsThank you! sorry for the trouble, I was confused when the console wasnt giving me any messages. Sorry about my silly mistakes.