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!

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

balraj sarai
balraj sarai
6,303 Points
Posted by balraj sarai
balraj sarai
6,303 Points

programming AJAX

Can you please check what the problem is with this code. I tried to do the rooms widget on my own. I do not get any errors, but the list comes undefined and in my employees list, instead of in the rooms list. 

var xhr1 = new XMLHttpRequest();
xhr1.onreadystatechange = function () {
  if(xhr1.readyState === 4 && xhr1.status === 200) {
    var rooms = JSON.parse(xhr1.responseText);
    var statusHTML1 = '<ul class="bulleted">';
    for (var i=0; i<rooms.length; i += 1) {
      if (rooms[i].available === true) {
        statusHTML1 += '<li class="yes">';
      } else {
        statusHTML1 += '<li class="no">';
      }
      statusHTML1 += rooms[i].room;
      statusHTML1 += '</li>';
    }
    statusHTML += '</ul>';
    document.getElementById('roomList').innerHTML = statusHTML;
  }
};
xhr.open('GET', '../data/rooms.json');
xhr.send();
Aurelian Spodarec
Aurelian Spodarec
7,369 Points

hi , i sugest you to add

var  your code here

``javascript# and then close without hte phone sign adding three of that at the end of your code on next line

it will make easier and faster for peopel that will help you

David Mandel
David Mandel
33,158 Points

Two possible problems:

1) Class name for the unordered list has changed. It should now be:

'<ul class="rooms">'

2) Using the right class name for the list items. I think you need to change your if/else statement so that if true, 

        statusHTML += '<li class="empty">';

And then if false the class name would be full.

Hope that helps!

1 Answer

balraj sarai
balraj sarai
6,303 Points
balraj sarai
balraj sarai
6,303 Points

var statusHTML1 = '<ul class="rooms">';

i forgot to change the class name of this (above), and also forgot to change the variable names (below) to xhr1. 

xhr1.open('GET', '../data/rooms.json');
xhr1.send();

but thank you all for your replies.