CPSC1520 – JavaScript 6 Exercise: Fetch API solved

Introduction The Fetch API is essential to most client side JavaScript applications. In this in class exercise what you’ll be doing is you’ll be using fetch to get data and populate an application. We’ll be using the data from the Metropolitan Museum of Art https://metmuseum.github.io/ to practice getting data and reading some documentation. Exercise Step 1: Fetch and Render the objects from the Met Museum REST API 1. Create a function named “getMuseumObjectsData”, this is going to be the function that will be doing our fetch requests. a. You’ll be needing to loop through the museum objects ids so that in this function so that you can access each id. 2. In the loop that you’ve created in the previous step you’ll need to make a fetch request for each id to the “Object” endpoint of the MET Museum API. a. You’ll be using the documentation from the MET Museum REST API. Look at the documentation under “Object” (not “Objects”) at this link https://metmuseum.github.io/. Note that you can use a REST API client to ensure that you are making the correct request. b. To ensure that you’ve got the fetch request working, print out the resolved data to the console. 3. Create a function named “renderGalleryCard”. a. This function will take five parameters i. Title ii. Image iii. artistName iv. date v. wikiDataUrl b. Select the element with the class “museum-gallery” c. Loop through each contact and use the “HTML for the project” in the main.js to continuously add a templateString to the element above. d. When you call the function with the correct data the page: i. Must have the correct title matching the screenshot below ii. Must have the correct image matching the screenshot below iii. Must have the correct artist name matching the screenshot below iv. Must have the correct date matching the screenshot below v. Must have the correct wiki data url matching the screenshot below 4. Call the function “renderGalleryCard” when you resolve your fetch request in the “getMuseumObjectsData” function. 5. The final product should look like the screenshot below. Exercise Step 2 – Push up your code to GitHub 1. Open the link given and accept the assignment. Your link should look something like this. Note the image will be different because you’ll accept the assignment specified. You’ll see a page like this. One you’re repo is ready the page should look like the following. 2. You should see the page below once you click on the link highlighted in blue. Click the button that says “Code.” You’ll need to select “HTTPS” unless you’ve set up “SSH” (you can also set up GitHub CLI”. Click on the copy icon once you’ve selected the proper icon. 3. Clone the repository in your console (or if you’re using GitHub Desktop) using the “git clone REPO_URL” command. And go into this folder. 4. Make your changes, then add them to staging (using “git add .”) and commit them (using “git commit -m “CHANGE THIS MESSAGE”). Once committed, push them up to GitHup (using “git push”) it should look like below. 5. If you click “Pull Requests” and then the first item called “Feedback” you should see your commit (seen at the bottom). 6. Upload the link of your repository to Moodle. Grading I’ll give full marks if: • The code is correctly implemented as described above. • The end result looks like the following picture