Fetch JSON Example App

Activity -read data from open API - Library

Step 1 - create a new folder

Step 2 - create the following files

index.html
script.js

Step 3 - Copy and paste the html template to get started.

HTML Template - In the below template we have import Jquery in the header

<!DOCTYPE html>

<html>

<head>

<script

src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

</head>

<body>

<h1>Library Data</h1>

</body>

</html>

JavaScript

We are going to be accessing an open API from a Library. No token key required. Source: https://openlibrary.org/developers/api

Click on this example query to see results in json - https://openlibrary.org/subjects/love.json

Step 1 - Add constants for the html page elements and a global variable for the data being stored

const content = document.getElementById("content");

var data;

//start program

fetchData("https://openlibrary.org/subjects/love.json")

Step 2 - Create a async fetch function to get data from the API and store in a global variable(data). You can pass in a url as a parameter/argument. See above we will be searching for book subjects about love...

async function fetchData(url) {

await $.getJSON(url, function (result) {

console.log(result); //output results as JSON

data = result;

});

}

When you run the program and inspect the console log you should be able to see JSON data returned. You navigate through the json to the get author of the first record by writing the following command.

data.works[0].title

Step 3 - Print the data to html page

In this step we want to loop over and navigate through the JSON data and print the author and title of the book. Lets do this in a new function.

This structure works with this data set but others may be different. Use this as a starting point.

function printData() {

var text = "<ul>"; //we will concatenate all our code text before updating the page

for (var i = 0; i < data.works.length; i++) {

text += `<li>${data.works[i].title}-${data.works[i].authors[0].name}</li>`

}

text += "</ul>"

//print all the data to the content div

content.innerHTML = text;

}

Activity

Once you have the above working see if you can extend the app to do the following:

Search for different types of subjects based off a drop down list (remember in HTML we can use the select element)
Can you reorder the results from A - Z or Z - A
Can you filter results further to only include specific matches - maybe add a search field to your app
Think about other ways you could extend your basic library app