Code a $.ajax method that loads the JSON data from the URL https://jsonplacehold
ID: 3703006 • Letter: C
Question
Code a $.ajax method that loads the JSON data from the URL https://jsonplaceholder.typicode.com/photos
After the data is loaded, loop over the data and replace the “pop” id in the starter HTML with the following HTML so that the content will render in that div:
For each album, loop through all of the IDs and on each line of html display
Album ID (albumid) using a H2
Photo ID (id) using H3
Title as <h3> (title)
Thumbnail Image (thumbnailUrl) as an <img> tag
Hyperlink the thumbnail to the URL for the big photo (url).
After each album, put a <hr> and start the new album.
Add an option to the $.ajax method that displays an alert message if the data can’t be found. This message should include the error code and error message that’s returned by the method. To test this, you can change the name of the url that’s used so the data can’t be loaded and then change it back after the test.
Sample output:
Hints & Tutorials:
Use simple Ajax code like below to complete the assignment.
$.ajax({
url: “<place your url here>”,
dataType: "json",
success: function(data){
// process the data here. Use a separate function for full points.
},
error: function(data){
// put your error handling code here
}
})
Here's a very good tutorial that shows how you to build your HTML by looping through the data object https://www.youtube.com/watch?v=rJesac0_Ftw. You should do this in a separate function called from within the success part of the ajax call.
for(i=0; i<data.length; i++) {
// build your html string here
}
Remember to replace the html in the DIV that has an ID "output" with the HTML you've built in the previous step.
Explanation / Answer
Please find my answer:
Hello, I have prepared javascript as per your specification and I have included the explanation in the code below as comments, Do read the comments and try to grasp every line of code. If you need further help about this solution then please do comment.
If you need only javascript code then take the code which is in bold font, However I have included full HTML for simplicity.
<html>
<head>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.js">
</script>
<div id="pop">
</div>
<script type="text/javascript">
$(document).ready(function(){
// Here we are executing ajax call to get the json data
$.ajax({url: "https://jsonplaceholder.typicode.com/photos",context: document.body}).done(function(data){
// This is don callbank, which will be called on successful transmission of response to our browser
var html="";// This is empty variable which will hold the html to be injected in pop div
for(var i=0;i<data.length;i++)// Here we are traversing through the json response
{
// Here we are creating html as per the specification
html+="<h2>"+data[i].albumId+"</h2>";
html+="<h3>"+data[i].id+"</h3>";
html+="<h3>"+data[i].title+"</h3>";
html+="<a href=""+data[i].url+""><img src=""+data[i].thumbnailUrl+""/></a>";
if(i>0 && data[i].albumId!=data[i-1].albumId)
{
html+="<hr>";
}
}
$('#pop').html(html);// using .html() method we can inject html to certain elements. we are doing the same here
}).error(function(data){alert("Error code:"+data.status+" "+"Error message:"+data.statusText);});
// above line is error callback which will be called when any error occurs, and it returns one object which has status and statusText attributes which contains error code and error message respectively, We are printing the same in alert.
});
</script>
</body>
</html>
Good luck !
Please DONT forgot to rate my answer. We are working hard for you Guys!!
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.