For retrieving data from the API we need an asynchronous function, because we do not want the rest of our code to stop. Change the controlsettings function in index to the following:
Now we will add the methods in the paintingView file by adding the following code:
Our elements.js now contains a couple more query selectors:
And add the following code for the loader spinner in main.scss:
6.2 Retrieving new paintings from the Harvard Art API
We first need to get our API key from Harvard. You can get one here: https://www.harvardartmuseums.org/collections/api
Then we can go to the documentation and see what we have to do:
But let’s first set up our API call in our application. Add the following code in the controlSettings method:
Then run the command npm install axios this will make it easier for us to do API calls. Then make sure your /models/Search.js looks like this:
In the main JS folder, create a file called config.js - here we will place our API key.
We want to retrieve at least:
The image path
Name of the artist
Name of the painting
Let’s check how we can do that. With an object we have all the information we need:
We will try to run a query in Search.js using the following code
Press generate in the app and check your console.log, it works! We received an object will all kinds of data. Now let’s build the correct query.
6.3 Retrieving data based on users input
Now we need to actually have the real classifications and periods which Harvard Art uses. Let’s get them from the website so your data file looks like this.
Our complete Search.js now looks like:
With our buildQuery function we are setting up our query based on the user settings.
Now let’s render the resulting paintings on the screen, update your renderPaintings function in paintingView with the following:
6.4 Combining different user preferences
We have a bug now, we can not combine any classifications or periods with each other. Only single requests e.g. period=Iron Age is possible unfortunately with the API. We will solve this by limiting the user to 1 classification and 1 period. Then we will filter the data by period.
We can limit the classification and period by changing our button toggle function:
And adding the settingsView.toggle method:
Now the classification part is working! Let’s filter our data if the user has select a period.
Not so many object actually have a period, so lets change the period to century. You can make a folder wide replace in visual code by using SHIFT+CTRL+F and then search and replace for ‘period’ to ‘century’.
Now the data.js file looks like:
Then remove /models/Settings.js as we do not need the settings state anymore, the search state is enough. Also remove it in the index.js file.
Our complete Search.js file then looks like
Now we can filter the classification that the user has chosen. The resulting artworks are the same every time, let’s make them random by adding a randomize method in Search.js
We can filter the limit the data we get back from randomize by the limit variable. The other methods then look like:
Then we need to update out paintingView.js:
6.5 Loading default artworks
To load a default query we will add the following method to the init function:
And the in settingsView we will make the selected items active by toggling their classes. We have to select them again because they are rendered later than elements.js select them.
Let’s improve our error handling. We can do this by throwing an error back when no images have been found. Also we will place a loading spinner remove function outside the renderPaintings function so we can call it from the controller.