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 AJAX Basics (retiring) jQuery and AJAX Stage 3 Challenge Answer

Posted by Uche Onuekwusi
Uche Onuekwusi
18,070 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)
}

});

1 Answer

Thomas Hewitt
Thomas Hewitt
17,691 Points
Thomas Hewitt
Thomas Hewitt
17,691 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.