Using JAVASCRIPT - Code a $.ajax method that loads the JSON data from the URL ht
ID: 3814661 • Letter: U
Question
Using JAVASCRIPT -
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.
Explanation / 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 !
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.