JavaScript AJAX Basics (retiring) Programming AJAX Stage 2 Challenge

Nermin Kekic
Nermin Kekic
6,967 Points

Unable 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>
Nermin Kekic
Nermin Kekic
6,967 Points

I 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.

Aakash Srivastav
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,610 Points

Hey..congratulations of finding your own bug. Now you will remember this mistake :)
Keep coding :)

1 Answer