6. Setting up the API
6.1 Async and adding loading spinner
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:
// SAVE NEW SETTINGS
const controlSettings = async () => {
// Remove current paintings
paintingView.clear();
// Render loader icon
paintingView.renderLoader();
// Retrieve settings from settingsView
const newSettings = settingsView.getSettings();
// Update state with new settings
state.settings.userSettings = newSettings;
// New Search object and add to state
state.search = new Search(newSettings);
paintingView.renderPaintings('test');
}
Now we will add the methods in the paintingView file by adding the following code:
// CLEAR PAINTINGS
export const clear = () => {
elements.paintings.forEach(painting => {
painting.style.opacity = 0;
})
}
// RENDER LOADER
export const renderLoader = () => {
const loader = '<div class="lds-dual-ring"></div>';
elements.artWrapper.insertAdjacentHTML('afterbegin', loader);
}
Our elements.js now contains a couple more query selectors:
export const elements = {
settings: document.querySelector('.settings'),
buttons: document.querySelectorAll('.box__item'),
arrowLeft: document.querySelector('.circle__left'),
arrowRight: document.querySelector('.circle__right'),
artWrapper: document.querySelector('.art__wrapper'),
paintings: document.querySelectorAll('.painting'),
paintingImg: document.querySelectorAll('.painting img'),
generate: document.querySelector('.box__generate'),
classification: document.querySelector('.classification'),
period: document.querySelector('.period'),
};
And add the following code for the loader spinner in main.scss:
// Loader spinner
.lds-dual-ring {
display: inline-block;
width: 80px;
height: 80px;
position: absolute;
z-index: 1;
color: $color1;
}
.lds-dual-ring:after {
content: " ";
display: block;
width: 64px;
height: 64px;
margin: 8px;
border-radius: 50%;
border: 6px solid $color1;
border-color: $color1 transparent $color1 transparent;
animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
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:
https://github.com/harvardartmuseums/api-docs
But let’s first set up our API call in our application. Add the following code in the controlSettings method:
// Retrieve paintings
try {
// 4) Search for paintings
await state.search.getPaintings();
// 5) Render results
paintingView.renderPaintings(state.search.result);
} catch (err) {
alert('Something wrong with the search...');
}
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:
import axios from 'axios';
import { key } from '../config';
export default class Search {
constructor(query) {
this.query = query;
}
async getResults() {
try {
const res = await axios(`${proxy}http://food2fork.com/api/search?key=${key}&q=${this.query}`);
this.result = res.data.recipes;
// console.log(this.result);
} catch (error) {
alert(error);
}
}
}
In the main JS folder, create a file called config.js - here we will place our API key.
export const 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:
https://github.com/harvardartmuseums/api-docs/blob/master/sections/object.md
We will try to run a query in Search.js using the following code
async getPaintings() {
try {
const res = await axios(`https://api.harvardartmuseums.org/object?person=33430&apikey=${key}`);
this.result = res.data;
console.log(this.result);
} catch (error) {
alert(error);
}
}
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.
export const data = {
classification: ['Paintings', 'Photographs', 'Drawings', 'Vessels', 'Prints'],
period: ['Middle Kingdom', 'Bronze Age', 'Roman period', 'Iron Age']
}
Our complete Search.js now looks like:
import axios from 'axios';
import { key } from '../config';
export default class Search {
constructor(settings) {
this.settings = settings;
}
buildQuery(settings) {
let classification = [];
settings.classification.forEach(el => classification.push('&classification=' + el));
classification = classification.toString();
let period = [];
settings.period.forEach(el => period.push('&period=' + el));
period = period.toString();
let query = classification + period;
query = query.replace(',', '');
this.query = query;
}
async getPaintings() {
try {
this.buildQuery(this.settings);
const res = await axios(`https://api.harvardartmuseums.org/object?apikey=${key}${this.query}`);
console.log(res);
this.result = res.data.records;
console.log(this.result);
} catch (error) {
alert(error);
}
}
}
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:
export const renderPaintings = paintings => {
// Remove loader
const loader = document.querySelector(`.lds-dual-ring`);
if (loader) loader.parentElement.removeChild(loader);
console.log(paintings);
// Replace paintings
elements.paintingImg.forEach((img, i) => {
img.src = paintings[i].primaryimageurl;
})
// Show paintings again
elements.paintings.forEach(painting => {
painting.style.opacity = 1;
})
}
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:
elements.settings.addEventListener('click', (e) => {
if (!e.target.classList.contains('box__generate')) {
const activeClassification = document.querySelector('.box__item.active[data-type="classification"]');
const activePeriod = document.querySelector('.box__item.active[data-type="period"]');
const target = e.target.closest('.box__item');
if (target.dataset.type == 'classification' && activeClassification) {
settingsView.toggle(activeClassification);
}
if (target.dataset.type == 'period' && activePeriod) {
settingsView.toggle(activePeriod);
}
settingsView.toggle(target);
}
})
And adding the settingsView.toggle method:
export const toggle = target => {
target.classList.toggle("active");
}
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:
export const data = {
classification: ['Paintings', 'Jewelry', 'Drawings', 'Vessels', 'Prints'],
century: ['16th century', '17th century', '18th century', '19th century', '20th century']
}
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
import axios from 'axios';
import { key } from '../config';
export default class Search {
constructor(settings) {
this.settings = settings;
}
filterByCentury(results) {
const century = this.settings.century.toString();
const filtered = results.filter(result => result.century == century);
return filtered;
}
async getPaintings() {
try {
this.classification = this.settings.classification;
const res = await axios(`https://api.harvardartmuseums.org/object?apikey=${key}&classification=${this.classification}&size=100`);
this.result = this.filterByCentury(res.data.records);
} catch (error) {
alert(error);
}
}
}
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
randomize(data, limit) {
let result = [];
let numbers = [];
for (let i = 0; i <= limit; i++) {
const random = Math.floor(Math.random() * data.length);
if (numbers.indexOf(random) === -1) {
numbers.push(random);
result.push(data[random]);
}
}
console.log('result', result);
return result;
}
We can filter the limit the data we get back from randomize by the limit variable. The other methods then look like:
filterByCentury(results) {
const century = this.settings.century.toString();
const filtered = results.filter(result => result.century == century);
const result = this.randomize(filtered, 5);
return result;
}
async getPaintings() {
try {
this.classification = this.settings.classification.toString();
const res = await axios(`https://api.harvardartmuseums.org/object?apikey=${key}&classification=${this.classification}&size=100`);
this.result = this.filterByCentury(res.data.records);
} catch (error) {
alert(error);
}
}
Then we need to update out paintingView.js:
// RENDER PAINTINGS
export const renderPaintings = paintings => {
console.log('paintings', paintings);
// Show paintings again
elements.paintings.forEach(painting => {
painting.style.opacity = 1;
})
// Replace paintings
paintings.forEach((painting, i) => {
const imgPath = paintings[i].primaryimageurl;
if(imgPath) elements.paintingImg[i].src = imgPath;
})
// Remove loader
const loader = document.querySelectorAll(`.lds-dual-ring`);
if (loader) {
loader.forEach(loader => loader.parentElement.removeChild(loader));
}
}
6.5 Loading default artworks
To load a default query we will add the following method to the init function:
// Render default artworks
settingsView.renderDefault('Prints', '20th century');
controlSettings();
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.
export const renderDefault = (classification, century) => {
const buttons = document.querySelectorAll('.box__item');
buttons.forEach(button => {
if (button.innerHTML == classification || button.innerHTML == century) {
button.classList.toggle('active');
}
})
}
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.
// RENDER PAINTINGS
export const renderPaintings = paintings => {
if (paintings.length > 1) {
// Show paintings again
elements.paintings.forEach(painting => {
painting.style.opacity = 1;
})
// Replace paintings
paintings.forEach((painting, i) => {
const imgPath = paintings[i].primaryimageurl;
if(imgPath) elements.paintingImg[i].src = imgPath;
})
} else {
throw "No images found";
}
}
// Remove loader
export const removeLoader = () => {
const loader = document.querySelectorAll(`.lds-dual-ring`);
if (loader) {
loader.forEach(loader => loader.parentElement.removeChild(loader));
}
}
Top comments (0)