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 trialUche Onuekwusi
18,070 Pointsits 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
17,691 PointsHey 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.