Use API data to create an HTML report

TagUI has a feature that allows a connection to a web API and to store the data in a variable which can be used to transform the data.

The example code and the video show how to access the Studio Ghibli API and construct a web page from the available text and image data.

Note

There is no authentication necessary for the Studio Ghibli API.

The web page is built using 2 files:

To create the web page a file called template.html stores the top part of the web page – <html> <head> <body> tags.

The ghibli.tag file holds the TagUI script that queries the API and writes the data, closes the HTML tags and writes the HTML file (index.html).

HTML top section (template.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Studio Ghibli</title>
    <style>
        img {
            width:20%;
            height:20%;
        }
    </style>
</head>
<body>

    <h1>Studio Ghibli Films</h1>

   <!-- WRITE API CONTENT BELOW THIS LINE -->

Code used to pull in the API data (ghibli.tag)

// Studio Ghibli TagUI API
// Call web API 
// if the response is in JSON, api_json will automatically be created.

// template.html file holds the top section of the html page

// write template.html to index.html

load template.html to webPage

write `webPage` to index.html

 // connect to api
api https://ghibliapi.herokuapp.com/films

 // retrieve api data (22 films)
for n from 0 to 21

 // get film title
 film = api_json[n].title

 // get image url
 poster = api_json[n].image


 // \" to escape quotation marks
 write <img src=\"`poster`\" alt=\"film poster for `film`\"/> to index.html

//  end loop

write <hr /> to  index.html


//  close html tags and write page
// outside for loop
write  </body></html> to index.html

// launch index.html

To run the script at the terminal, in the directory containing both the .HTML and .TAG files, type:

tagui ghibli.tag -h

Note

The -h (headless switch) will run an invisible headless browser.

An additional -q (quiet switch) can also be used to hide the script output in the terminal.

Use API data to create an HTML report

Video: Create a Report with API Data