Photo Ajax

Purpose: To practice using jQuery ajax calls getting data in JSON and displaying it on a web page.

In this lab you will load data from a JSON file (external call) and display it asynchronously without refreshing the page.

Requirements:

1.Code a $.ajax method that loads the JSON data from the URL https://jsonplaceholder.typicode.com/photos

2.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:

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

4.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: