JavaScript AJAX Basics (retiring) Programming AJAX Stage 2 Challenge Answer

Marcell Ciszek
Marcell Ciszek
7,255 Points

AJAX BASICS , rooms avaible

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

1 Answer

Ross King
Ross King
18,521 Points

Hi Marcell Ciszek ,

If you are asking why the code doesn't work, based on what you provided the following is the most likely cause.

You are trying to use the AJAX call to retrieve data from ../data/rooms.json. This is navigating up one directory and then looking for the data directory. The path should be relative to the location you are calling the script from. In your case you would be calling it from the index.html.

To make your code work change the AJAX call to:

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

As the index.html file is in the same directory as the data, there is no need to navigate up.