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
Nermin Kekic
6,971 PointsUnable to get this code to display html?
Hello, I am working through AJAX class and i am stuck on this challenge. This code is not displaying available rooms on index.html why? I am seeing this error in Chrome console on line 7 but i am not sure how to resolve it.
Uncaught TypeError: Cannot read property 'available' of undefined
widget.js
var xhr_room = new XMLHttpRequest();
xhr_room.onreadystatechange = function () {
var roomsHTML = '<ul class="rooms">';
if (xhr_room.readyState === 4 && xhr_room.status === 200) {
var officerooms = JSON.parse(xhr_room.responseText);
for (var i = 0; officerooms.length; i += 1) {
if (officerooms[i].available === true) {
roomsHTML += '<li class="full">';
} else {
roomsHTML += '<li class="empty">';
}
roomsHTML += officerooms[i].room;
roomsHTML += '</li>';
console.log(roomsHTML);
}
roomsHTML += '</ul>';
document.getElementById('roomList').innerHTML = roomsHTML;
}
};
xhr_room.open('GET', 'data/rooms.json');
xhr_room.send();
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();
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AJAX Office Status Widget</title>
<link href='http://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 aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
sed quia consequuntur magni dolores eos qui ratione voluptatem sequi
nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit
amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim
ad minima veniam, quis nostrum exercitationem ullam corporis suscipit
laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel
eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae
consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
sed quia consequuntur magni dolores eos qui ratione voluptatem sequi
nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit
amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim
ad minima veniam, quis nostrum exercitationem ullam corporis suscipit
laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel
eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae
consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
sed quia consequuntur magni dolores eos qui ratione voluptatem sequi
nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit
amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim
ad minima veniam, quis nostrum exercitationem ullam corporis suscipit
laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel
eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae
consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</section>
<aside class="grid-30 list">
<h2>Meeting Rooms</h2>
<div id="roomList">
</div>
<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>
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 PointsHey..congratulations of finding your own bug. Now you will remember this mistake :)
Keep coding :)
Nermin Kekic
6,971 PointsNermin Kekic
6,971 PointsI found the bug! I forgot to add "i < officerooms.length" inside for loop. I spend last two hours looking at this, cant belie i miss this.