JavaScript AJAX Basics (retiring) jQuery and AJAX Stage 3 Challenge Answer

Uche Onuekwusi
Uche Onuekwusi
12,246 Points

its only the numbers that appear in mine

Here is my code var url = "rooms.json"

$.ajax({ type: "GET", url: url, success: function (response) { var html = "<ul class='rooms'>" $.each(response, function (indexInArray, valueOfElement) { if(valueOfElement.available === true ){ html+= "<li class='empty'>" + valueOfElement.room

     }else{
        html+= "<li class='full'>" + valueOfElement.room

     }

     html+="</li> "

});    
html+= "</ul>"
$("#roomList").html(html)
}

});

Thomas Hewitt
Thomas Hewitt
13,016 Points

Hey Uche,

For the most part your code is good. You've just got to make sure that you're closing things properly. So for example where you were concatenating to the html variable, you weren't closing the statements and the end of the success object was closed properly but it didn't then go on to close the .ajax method.

Also, your URL was pointing to rooms.json but it wasn't following the folder structure of the document tree so you needed to tell the browser to come out of the folder you were in and go into the data file. Otherwise it's searching for a file named rooms.json in the same folder as the one you're currently in.

Finally, when you're writing code in comments on the site, use three barticks (```) followed by the language name to denote that a code block is starting and then use three more once the code is finished.

$(document).ready(function () {
  $.ajax({ 
    method : 'GET',
    url : url,
    success : function (response) {
      var html = '<ul class="rooms">';
      $.each(response, function (index, room) {
        if(room.available === true ){ 
          html += "<li class='empty'>";
       }else{
          html += "<li class='full'>";;
       }
       html += room.room + "</li> ";
      }); // end each   
      html += "</ul>";
      $("#roomList").html(html);
    },
    error : function () {
      alert('something went wrong there!');
    }
  });// end ajax
}); // end document.ready

I hope this has been helpful. I know that JS can be a pain compared to other languages because it doesn't always point you straight to what the problem is.