Web Development | Web Development

APIs and fetching data

Image by Mental Cinephile

APIs in client-side JavaScript

APIs stands for Application Programming Interfaces.

They are constructs made to make complex functionality simpler. They abstract complex code away from you, providing easier syntax to use instead.

Common APIs include:

The DOM (Document Object Model) API for manipulating HTML and CSS.
The Fetch API which fetches data from servers.
The Canvas API for updating pixel data contained in the <canvas> element.
Twitter API to display your latest tweets.
YouTube API to embed videos on your site.

Fetch API

The Fetch API allows JavaScript to make an HTTP request to a server to retrieve specific resources. JavaScript can use the data (often JSON, but can be HTML or text) to update the page (using the DOM API) without reloading it.

This is common for data driven websites such as Amazon, YouTube, and eBay. With this model:

Page updates are faster, as you don't have to wait for the page to refresh.
Less data is downloaded on each update, meaning less wasted bandwidth. This makes it simpler for mobile downloads in countries that don't have much access to fast internet speeds.

The response interface of the Fetch API represents the response to a data request. The response object is often returned as a result of an API method call, such as fetch().

Fetch API is commonly used to request data from text files to populate a content area:

Example:

//setTimeout(function() {
    getText("https://temp.staticsave.com/65d8d1d3d272f.txt");
//}, 8000);
/*
setTimeout(getTxt(), 8000);

function getTxt(){
  getText("https://temp.staticsave.com/65d8d1d3d272f.txt");
}
*/
async function getText(file) {
  let myObject = await fetch(file);     // myObject is the response object of the fetch()
  let myText = await myObject.text();     // text() method of response object returns a promise that resolves to a string
  document.getElementById("demo").innerHTML = myText;
}

//setTimeout(function() {
    getText("https://temp.staticsave.com/65d8d1d3d272f.txt");
//}, 8000);
/*
setTimeout(getTxt(), 8000);

function getTxt(){
  getText("https://temp.staticsave.com/65d8d1d3d272f.txt");
}
*/
async function getText(file) {
  let myObject = await fetch(file);     // myObject is the response object of the fetch()
  let myText = await myObject.text();     // text() method of response object returns a promise that resolves to a string
  document.getElementById("demo").innerHTML = myText;
}

Async indicates that it is an asynchronous function. Asynchronous means that the code can start now and finish its execution later. Calling an async function will always return a Promise. A promise is something that will take time to do. Await stalls JavaScript from assigning fetch to the response variable until the promise has been resolved. Then the results from the fetch method can be assigned to the response variable.

For more on async functions see: https://www.freecodecamp.org/news/asynchronous-javascript-explained/

Using Fetch API in JavaScript

An endpoint is a unique url you call to interact with another system.

When making a request to an external API to get some data (a GET request) simply call fetch() with the endpoint url as the argument:

Example:

fetch('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson')

fetch('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson')

The response object (returned data) body for this endpoint will be information (in JSON format) on all earthquakes that have happened in the past hour.

The data returned from the API is not usually useable. You need to convert the data to a form which JavaScript can operate with. To do this use the response object’s json() method to convert the JSON into a JavaScript object:

Example:

// fetch.then
// #region snippet
fetch('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson')
// #endregion snippet
    .then(data => {
        return data.json();
    })
    .then(post => {
        console.log(post.metadata.title + " - data fetched!");
        //console.log(post.features[0].properties.place + " - data fetched!");
    });


// async await fetch
/*
async function quakeMag(){
    const quakeData = await fetch('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson');
    const quakeDataJSobj = await quakeData.json();
    console.log(quakeDataJSobj.metadata.title + " - data fetched!");
}

quakeMag();
*/

// fetch.then
// #region snippet
fetch('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson')
// #endregion snippet
    .then(data => {
        return data.json();
    })
    .then(post => {
        console.log(post.metadata.title + " - data fetched!");
        //console.log(post.features[0].properties.place + " - data fetched!");
    });


// async await fetch
/*
async function quakeMag(){
    const quakeData = await fetch('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson');
    const quakeDataJSobj = await quakeData.json();
    console.log(quakeDataJSobj.metadata.title + " - data fetched!");
}

quakeMag();
*/

The then() method is used to parse the data after it has been fetched. Once it has been converted to a JavaScript object using the json() method, the then() method is used again to post the metadata.title value from the JSON to the console, along with an added string.

Example:

let cx = document.querySelector("canvas").getContext("2d");     // creates a context object on the <canvas> element
let geoDataObj;


// fetch.then

fetch('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson')
.then(geoData => {
  // json() method of fetch API request object
  return geoData.json();     // returns a promise that parses JSON data and resolves/returns it as JavaScript Object
})
.then(geoDataObj => {
  let geoArray = geoDataObj.features;
  for (let i = 0; i < geoArray.length; i++){
    let magnitude = geoArray[i].properties.mag * 10;
    console.log(magnitude);
    let x = geoArray[i].geometry.coordinates[0];
    console.log(x);
    let y = geoArray[i].geometry.coordinates[1];
    console.log(y);
    let location = geoArray[i].properties.place;
    //cx.resetTransform();
    cx.translate(180, 90);
    cx.beginPath();     // method of Canvas 2D API starts a new path
    cx.arc(x, y, magnitude, 0, 2 * Math.PI);     // arc(x, y, radius, startAngle, endAngle)
    cx.strokeStyle = "red";
    cx.stroke();
    cx.font = "14px Arial";
    cx.fillStyle = "blue";
    cx.fillText(location, x, y+8);
  }
});

let cx = document.querySelector("canvas").getContext("2d");     // creates a context object on the <canvas> element
let geoDataObj;


// fetch.then

fetch('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson')
.then(geoData => {
  // json() method of fetch API request object
  return geoData.json();     // returns a promise that parses JSON data and resolves/returns it as JavaScript Object
})
.then(geoDataObj => {
  let geoArray = geoDataObj.features;
  for (let i = 0; i < geoArray.length; i++){
    let magnitude = geoArray[i].properties.mag * 10;
    console.log(magnitude);
    let x = geoArray[i].geometry.coordinates[0];
    console.log(x);
    let y = geoArray[i].geometry.coordinates[1];
    console.log(y);
    let location = geoArray[i].properties.place;
    //cx.resetTransform();
    cx.translate(180, 90);
    cx.beginPath();     // method of Canvas 2D API starts a new path
    cx.arc(x, y, magnitude, 0, 2 * Math.PI);     // arc(x, y, radius, startAngle, endAngle)
    cx.strokeStyle = "red";
    cx.stroke();
    cx.font = "14px Arial";
    cx.fillStyle = "blue";
    cx.fillText(location, x, y+8);
  }
});

XMLHttpRequest object

AJAX is Asynchronous JavaScript And XML. It is not a programming language. It just uses a combination of:

Browser-based XMLHttpRequest object (to request data from a web server).
JavaScript and HTML DOM (to display or use the data).

Using the XMLHttpRequest object to request data from a server is an older method than using the Fetch API, but one to be aware of.

The XMLHttpRequest object is used to request data from a server. In the following code onload() is an event which fires when the XMLHttpRequest transaction completes successfully, and responseText is a property of the XMLHttpRequest object.

The open() line is a GET request to the server at the url in the second parameter. The send() method prints the response text to the HTML page within the paragraph with id=”demo”.

Example:

function loadDoc() {
  const xhttp = new XMLHttpRequest();     // XMLHttpRequest object retrieves data from URL without page refresh
  xhttp.onload = function() {     // onload() event fires when the XMLHttpRequest completes
    document.getElementById("demo").innerHTML = this.responseText;     // responseText is a property of the XMLHttpRequest object
  }
  xhttp.open("GET", "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson");     // optionally async(default)/sync
  xhttp.send();     // initiates request
}

function loadDoc() {
  const xhttp = new XMLHttpRequest();     // XMLHttpRequest object retrieves data from URL without page refresh
  xhttp.onload = function() {     // onload() event fires when the XMLHttpRequest completes
    document.getElementById("demo").innerHTML = this.responseText;     // responseText is a property of the XMLHttpRequest object
  }
  xhttp.open("GET", "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson");     // optionally async(default)/sync
  xhttp.send();     // initiates request
}

References

APIs and fetching data ​

APIs in client-side JavaScript ​

Fetch API ​

Using Fetch API in JavaScript ​

XMLHttpRequest object ​

References ​

APIs and fetching data

APIs in client-side JavaScript

Fetch API

Using Fetch API in JavaScript

XMLHttpRequest object

References