Instructions
Write a program using jQuery to download a JSON file and create table rows from the JSON file data. Then add the table rows to the DOM.
- Use the jQuery “ready” function to wait until the DOM is ready.
- Use the jQuery “getJSON” function to get an external JSON file. The external JSON file is located here:/~tpollard/csci212/data/warhol.json
- Use the jQuery “each” function to loop through the data records.
- Build the HTML for each row of the table using template string literals. The columns of each row must contain this data:
- Column 1 must contain an <img> tag. The “src” attribute of the “img” tag will be the URL from the ‘image‘property of the record. Only show the first image: image[0].
- Column 2 must contain the contents of the “title” property of the record, followed by a “<br>” tag, followed by the contents of the “id” property of the record.
- Column 3 must contain the contents of the “inscription” property of the record.
- Column 4 must contain the “dating” property of the record.
- Use the jQuery “append” function to add each row to a document fragment.
- Finally, use the jQuery “append” function to add the fragment to the <tbody> tag of the table.