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.


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:

see image.
Academic Honesty!
It is not our intention to break the school's academic policy. Projects posted are only used as a reference and should not be submitted as is. We are not held liable for any misuse of the solutions. Please see the frequently asked questions page for further questions and inquiries.
Kindly fill out the form. Please provide a valid email address and we'll get back to you in less than 24 hours. We will be sending an invoice through PayPal upon confirmation. We are a non profit organization however we need an amount to keep this organization running, and to be able to complete our research and development.