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

Posted by Aaron HARPT
Aaron HARPT
19,845 Points

AJAX project challenge

I am having trouble with the Stage 2 AJAX Basics challenge. Here are the challenge steps:

Challenge Steps

Repeat the 4 steps of the Ajax process The URL for the JSON data is ../data/rooms.json Finished widget HTML looks like this: <ul class="rooms"> <li class="full">101</li> <li class="empty">102</li> <li class="full">103</li> <li class="full">104</li> <li class="empty">105</li> <li class="empty">106</li> </ul>

  1. Complete HTML goes inside a div with the ID of roomList

and here is my code;

var xhro = new XMLHttpRequest(); xhro.onreadystatechange = function () { if(xhro.readyState === 4 && xhro.status === 200) { var rooms = JSON.parse(xhro.responseText); var status = '<ul class="rooms">'; for (var i=0; i<rooms.length; i += 1) { if (rooms[i].inoffice === true) { status += '<li class="empty">'; } else { status += '<li class="full">'; } status += rooms[i].name; status += '</li>'; } status += '</ul>'; document.getElementById('roomList').innerHTML = status; } }; xhro.open('GET', '../data/rooms.json'); xhro.send();

Thanks.

1 Answer

Allison Davis
Allison Davis
12,698 Points
Allison Davis
Allison Davis
12,698 Points

I'm guessing this may be a Markdown formatting issue but the string values that will add the HTML to your variable 'status' are missing.

The callback function should look like this: 

  if(xhr1.readyState === 4 && xhr1.status === 200) {
    var rooms = JSON.parse(xhr1.responseText);
    var inUseHTML = '<ul class="rooms">';
    for (var i=0; i<rooms.length; i += 1) {
      if (rooms[i].available === true) {
        inUseHTML += '<li class="empty">';
      } else {
        inUseHTML += '<li class="full">';
      }
      inUseHTML += rooms[i].room;
      inUseHTML += '</li>';
    }
    inUseHTML += '</ul>';
    document.getElementById('roomList').innerHTML =inUseHTML;

If those string values are in fact in your code, I'd double check all of your classes, that was what initially tripped me up when solving this challenge. Good luck!