Ergo API basic query

Community Community Tutorials
1

ErgoTutorials logo

Tutorial 1 - Ergo API basic query

ErgoTutorials.com

In this tutorial we are going to rescue some values from the Ergo blockchain. We will use a simple function to query Ergo Explorer API version 1. We are going to see how with very few lines of code and very basic knowledge of HTML and JavaScript, we can interact with the Ergo blockchain.

ErgoTutorials.com/video/ergo-api-query

The first thing we will do is create a file with an HTML5 structure called index.html. We will modify its title, from its body tag we will call the heightCreation function through an onload and we will add a Javascript file called getInfo.js that we will create later.

index.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>ErgoTutorials.com - Video 1</title>
</head>
<body onload="heightCreation()">
    <script src="getInfo.js"></script>
</body>
</html>

Now we are going to create the Javascript function to receive the values of the Ergo blockchain through its API.

For our function we will use an endpoint that will be in charge of providing us with the information we need. The endpoint is the following https://api.ergoplatform.com/api/v1/info

Ergo Explorer API v1

getInfo.js

function heightCreation(){
    fetch('https://api.ergoplatform.com/api/v1/info')
        .then(response => response.json())
        .then(data => {
            console.log(data)
        })
        .catch(error => console.error('Error:', error))
}

The values that I will receive from the API will be shown in the console through console.log. From the console of our browser we can see that the API response returns the data correctly, we make the comparison with the documentation.

Now we will add one more line of code to use one of the received values to color the background of our website, this color will be defined by the current block height.

getInfo.js

console.log(data)
document.body.style.backgroundColor = "#" + data.height

With this last line we have our example finished. Now we go to the browser and refresh to observe how the background of our website changes color and takes the color of the current Ergo block height.

Ergo API basic query

2 Likes