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

(title)

Thumbnail Image (thumbnailUrl) as an tag

Hyperlink the thumbnail to the URL for the big photo (url).

After each album, put a

---

and start the new album.

Add an option to the $.ajax method that displays an alert message if the data cant be found. This message should include the error code and error message thats returned by the method. To test this, you can change the name of the url thats used so the data cant 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: ,

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

// 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.