Skip to main content

Working with JSON APIs

Shenzhen, China

Github Repository

Local JSON Data

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>JS APIs</title>
        <meta name="description" content="Literary Classic Search Engine.">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <link href="/styles/style.css" rel="stylesheet" />
    </head>
    <body>
        <main>
            <h1>Loading... </h1>
            <p>Loading... </p>
        </main>
        <script src='/scripts/quote.js'></script>
    </body>
</html>

JSON

{ "id": 1, "quote": "Hello World", "author": "Me" }

Javascript

const quoteTag = document.querySelector("h1")
const authorTag = document.querySelector("p")


// select HTML tags to fill with data
const getQuote = function () {
    fetch("/data/quote.json")
        .then(response => response.json())
        .then(jsonData => {
            quoteTag.innerHTML = "&ldquo; " + jsonData.quote + " &rdquo;"
            authorTag.innerHTML = "&mdash; " + jsonData.author
        })
}

// get data on page load
getQuote()

Local Randomized JSON Data

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>JS APIs</title>
        <meta name="description" content="Literary Classic Search Engine.">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <link href="/styles/style.css" rel="stylesheet" />
    </head>
    <body>
        <main>
            <h1>Loading... </h1>
            <p>Loading... </p>
        </main>
        <footer>
            <img src="/assets/random.svg">
        </footer>
        <script src='/scripts/quotes.js'></script>
    </body>
</html>

JSON

[
    { "id": 1, "quote": "Quote 1", "author": "Author1" },
    { "id": 2, "quote": "Quote 3", "author": "Author3" },
    { "id": 3, "quote": "Quote 4", "author": "Author4" },
    { "id": 4, "quote": "Quote 5", "author": "Author5" }
]

Javascript

const quoteTag = document.querySelector("h1")
const authorTag = document.querySelector("p")
const randomTag = document.querySelector("footer img")

// select HTML tags to fill with data
const getQuote = function () {
    if(data.length > 0) {
        // Get random quotes
        const randomNumber = Math.floor(Math.random() * data.length)
        const randomQuote = data[randomNumber]
        quoteTag.innerHTML = "&ldquo; " + randomQuote.quote + " &rdquo;"
        authorTag.innerHTML = "&mdash; " + randomQuote.author
    }
}

// get local json data
let data = []
fetch("/data/quotes.json").then(response =>
    response.json()
).then(jsonData => {
    data = jsonData
    // get initial quote
    getQuote()
})

// get new quote on button press
randomTag.addEventListener("click", function() {
    getQuote()
})

External JSON API

The fetch promise also works with external URLs (be careful with Same-Origin...).

Javascript

// get external json data
let data = []
fetch("http://localhost:8080/data/quotes.json").then(response =>
    response.json()
).then(jsonData => {
    data = jsonData
    // get initial quote
    getQuote()
})