Meeting Room AJAX Request

Question

Hello

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); "

Thanks.

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");
roomRequest.send();

Answer 1 · 2014-10-06T23:56:49Z

October 6, 2014 11:56pm

Hi Jennifer Riley

There are a few errors in your code:

In the open() method at the bottom of your code, the path is incorrect. Should be "../data/rooms.json"
At the end of the callback function you're selecting the wrong element. It's not roomsList it's roomList.
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.

Answer 2 · 2014-10-07T20:31:37Z

October 7, 2014 8:31pm

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!

Welcome to the Treehouse Community

Looking to learn something new?

Jennifer Riley

Jennifer Riley

Meeting Room AJAX Request

2 Answers

Dave McFarland

Dave McFarland

Jennifer Riley

Jennifer Riley

Jennifer Riley

Jennifer Riley

Dave McFarland

Dave McFarland