[SOLVED] Cpsc1520 – javascript 6 exercise: fetch api

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