11/11

11. API and JSON

In the previous chapter, the data provided by the API was an image, and thus could directly be included in the webpage. In a more general case, generic data information should be sent by the server, and used by the client-side code. Two exchange data formats are commonly met: XML, and JSON.

  • XML (eXtensible Markup Language) is a tag-based data exchange format.

  • JSON (JavaScript Object Notation) is a text curly-brackets based data exchange format.

XML is the older and more generic standard. It follows strong rules that can be checked using XML parsers and validators. JSON is a more recent exchange format, initially developed for JavaScript, but today used as generic exchange format. JSON follows a hierarchical organization described as a pair of key/value elements. JSON is compatible, by design, with JavaScript Objects. It means that JavaScript object can be easily converted into JSON, and conversely between JSON and JavaScript code.

While JSON is less structured than XML, it is less verbose and more easily read and modified by human as simple text.

Fetching JSON Data

The fetch function allows to contact a server at a given url, and run some user defined function once the response is received.

Let us consider the case of the Studio Ghibli API providing (in a free way) information on Ghibli movies through web API.

  • Type the following url in your web browser: https://ghibliapi.herokuapp.com/films/

    • Movies and the associated information are provided as JSON format (here displayed automatically by your browser)

Now, let us consider the case where we want to use and process these data from JavaScript code.

  • Consider the following webpage (associated code)

    • Observe the JavaScript code and the message on the console.

    • Note that the message is received asynchronously (The message "Fetch is called" is printed before "Response received"). As the response of the server can be delayed or even failed, you cannot assume a precise time when the response to the fetch function will be executed.

The data received by fetch corresponds to an HTTP response. It is not yet directly usable as a JavaScript structure. To this end, the response can be converted in JavaScript data structure using the function .jon() (assuming the response is given as a json text format)

Convert response into JS Data Structure

Change the JavaScript code as follows

"use strict";


const url = "https://ghibliapi.herokuapp.com/films";


fetch(url)
.then(convertJSON)
.then(answer);


function convertJSON(response){
  return response.json();
}


function answer(data) {
  console.log(data);
}

Observe that the variable data displayed on the console now corresponds to a JavaScript data structure with the information on ghibli movies.

Displaying information

Finally, consider the following code that should display on the webpage the list of all Ghlibli movies.

"use strict";


const url = "https://ghibliapi.herokuapp.com/films";


fetch(url)
.then(convertJSON)
.then(answer);


function convertJSON(response){
  return response.json();
}


const bodyElement = document.querySelector('body');
function answer(data) {
  for(const movie of data)
  {
     const title = movie.title;

     const newElement = document.createElement('p');
     newElement.textContent = title;
     console.log(title);
     bodyElement.appendChild(newElement);
  }
}

Possible extensions

If you have time, consider possible extension of such API usage. For instance, to display dynamically the name of all characters of the selected Ghibli movie.

Following map request, you may also investigate the use of Geocoding using the Nominatim API allowing to convert a name into geographic latitude/longitude coordinates.

Ex. https://nominatim.openstreetmap.org/search?q=polytechnique+palaiseau&format=json

The result can then be used to display dynamically the map of a user defined place.