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) Programming AJAX Stage 2 Challenge Answer

Jennifer Riley
Jennifer Riley
6,555 Points

Meeting Room AJAX Request


In part 1 of the video you follow along and create an AJAX request to complete a widget. In the next section your asked to change the code yourself to add a second widget. I followed along and the first part works fine. I copied the working code (as suggested) and changed it to make the second widget work. When I run the code in the browser I get a console error message [ Uncaught SyntaxError: Unexpected token < ] on line 27.

I reviewed my code alongside the video and cannot see the problem, any ideas?

(line 27 is " var rooms = JSON.parse(roomRequest.responseText); "


var roomRequest = new XMLHttpRequest();
roomRequest.onreadystatechange = function() {
  if(roomRequest.readyState === 4) {
    var rooms = JSON.parse(roomRequest.responseText);
    var statusHTML = '<ul class="rooms">';
    for (var i =0; i<rooms.length; i+=1) {
      if (rooms[i].available === true) {
        statusHTML += '<li class="empty">';
      } else {
        statusHTML += '<li class="full">';
    statusHTML += rooms[i].name;
    statusHTML += "</li>";  
  statusHTML += '</ul>'; 
  document.getElementById('roomsList').innerHTML = statusHTML;
roomRequest.open("GET", "../date/rooms.json");

2 Answers

Dave McFarland
Dave McFarland
Treehouse Teacher

Hi Jennifer Riley

There are a few errors in your code:

  1. In the open() method at the bottom of your code, the path is incorrect. Should be "../data/rooms.json"
  2. At the end of the callback function you're selecting the wrong element. It's not roomsList it's roomList.
  3. When you add the room number to the HTML -- statusHTML += rooms[i].name; -- you need to access the correct name in the object. For the employees it's name but for the rooms it's room like this rooms[i].room.
Jennifer Riley
Jennifer Riley
6,555 Points

Hi, again, and thank you for your reply.

I have corrected the errors as above and rechecked my code, but I am still getting the same error message. I have moved on to the next part but it is still annoying me that I can't get it to work. I have even started again and I still get the same error.

I googled the error and came up with a Stack Overflow response to a similar question "Uncaught SyntaxError: Unexpected token < " but this is in relation to JQuery.

"This usually happens when you're including or posting to a file which doesn't exist. The server will return a regular html-formatted "404 Not Found" enclosed with

'<html></html>' tags. That first chevron < isn't valid js nor valid json, therefore it triggers an unexpected token."

I looked in my project files and I cannot see the file that I am linking to in my open() request. Could this be the problem or am I just going bonkers and am missing something obvious!

Jennifer Riley
Jennifer Riley
6,555 Points

Thanks, the problem is sorted now. I was working in the wrong workspace, so the file I was looking for wasn't there. In the video it says to 'copy and paste' the code underneath the original, but you need to open up the new workspace so the file is in the Data folder.

Dave McFarland
Dave McFarland
Treehouse Teacher

Thanks for pointing this out Jennifer Riley

I'll add instructions to the Teacher's notes to make it clear that you need to open the new workspace. Sorry for the confusion.