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

JavaScript AJAX Basics (retiring) jQuery and AJAX Stage 3 Challenge

Posted by Charlie Harden
Charlie Harden
10,087 Points

Can't find mistake in identical looking code

Here is the broken code I can't get to work: 

$(document).ready(function () {

  //inoffice employee widget
  $.getJSON('../data/employees.json', function (data) {
    var statusHTML = '<ul class="bulleted">';
    $.each(data,function (index, employee) {
      if (employee.inoffice === true) {
        statusHTML +='<li class="in">';
      } else {
        statusHTML +='<li class="out">';
      }
      statusHTML += employee.name + '</li>';
    });
    statusHTML += '</ul>';
    $('#employeeList').html(statusHTML)
  }); // end getJSON


  //available rooms widget
  $.getJSON('../data/rooms.json', function (data) {
    var statusHTML = '<ul class="rooms">';
    $.each(data,function (index, room) {
      if(room.available === true) {
        statusHTML += '<li class="empty">
      } else {
        statusHTML += '<li class="full">
      }
      statusHTML += room.room + '</li>';
    });//end of each
    statusHTML += '</ul>';
    $('#roomList').html(statusHTML)
  });//end of JSON

}); // end ready

Here is the code that works perfectly fine: 

$(document).ready(function () {

  //inoffice employee widget
  $.getJSON('../data/employees.json', function (data) {
    var statusHTML = '<ul class="bulleted">';
    $.each(data,function (index, employee) {
      if (employee.inoffice === true) {
        statusHTML +='<li class="in">';
      } else {
        statusHTML +='<li class="out">';
      }
      statusHTML += employee.name + '</li>';
    });
    statusHTML += '</ul>';
    $('#employeeList').html(statusHTML)
  }); // end getJSON


  //available rooms widget
    $.getJSON('../data/rooms.json', function (data) {
    var statusHTML = '<ul class="rooms">';
    $.each(data,function (index, room) {
      if (room.available === true) {
        statusHTML +='<li class="empty">';
      } else {
        statusHTML +='<li class="full">';
      }
      statusHTML += room.room + '</li>';
    });
    statusHTML += '</ul>';
    $('#roomList').html(statusHTML)
  }); // end getJSON
}); // end ready

I have gone through it but I can't find the difference. Can anyone help?

1 Answer

Andrew Hickman
seal-mask
.a{fill-rule:evenodd;}techdegree
Andrew Hickman
Full Stack JavaScript Techdegree Student 10,013 Points
Andrew Hickman
.a{fill-rule:evenodd;}techdegree
Andrew Hickman
Full Stack JavaScript Techdegree Student 10,013 Points

Hey Charlie! The problem with the broken text lies in this snippet here:

if(room.available === true) {
        statusHTML += '<li class="empty">
      } else {
        statusHTML += '<li class="full">
      }

The strings on both statusHTML concatenations are not closed, causing your JavaScript to break. The correct code fixes this:

if (room.available === true) {
        statusHTML +='<li class="empty">';
      } else {
        statusHTML +='<li class="full">';
      }
Charlie Harden
Charlie Harden
10,087 Points

Thank you so much!!