How to create a table with javascript from hive engine's data.
So this serves as an introduction on how to read info from hive-engine api's to create a functional website: Our plan is to create a table that shows the top 20 holders of a certain token.
First we create an index.html file with the following code:
<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>Document</title>
</head>
<body>
</body>
</html>
Now we need to set the skeleton for our table adding these few lines between the body tags:
<main>
<table>
<thead>
<tr>
<th>Users</th>
<th>BUDS</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>
</main>
Then finally:
<!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>Document</title>
</head>
<body>
<main>
<table>
<thead>
<tr>
<th>Users</th>
<th>BUDS</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>
</main>
</body>
</html>
We can open the file in a browser and check everything is okay:
Now we need to get our data from hive's api: one way to do that is using the fetch function: We need to create a source.js file and add these few lines of code:
async function findData() {
const response = await fetch("https://api.hive-engine.com/rpc/contracts", {
method: "POST",
headers: { "Content-type": "application/json" },
body: JSON.stringify({
jsonrpc: "2.0",
method: "find",
params: {
contract: "tokens",
table: "balance",
query: {},
},
id: 1,
}),
});
const responseJson = await response.json();
const data = responseJson.result
console.log(data);
}
findData()
Basically it's a an async/await function that contains a fetch method which allows us to do get and post requests to the api.
Now we need to link the index file to our html file before the body tag:
<script type="text/javascript" src="index.js"> </script>
<!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">
<script type="text/javascript" src="source.js"> </script>
<title>Document</title>
</head>
<body>
<main>
<table>
<thead>
<tr>
<th>Users</th>
<th>BUDS</th>
</tr>
</thead>
<tbody id="tablebody">
</tbody>
</table>
</main>
</body>
</html>
Now we will go back to the javascript file and replace the query for:
query: {"symbol":"BUDS", 'balance': { '$ne' : "0" }},
So we can get fillter out from the data those who have 0 buds:
Well now we have the data, but we need to insert it into the DOM. So we will add some DOM manipulation functions to our main asynchronic function
const tableBody = document.getElementById("tablebody"); //finds the element with the id "tablebody"
Then we are gonna need to create some rows for every user in the top 20
we can solve this by using a for loop:
for (i = 0; i < data.length; i++) {
const row = document.createElement("tr"); //creates a row
const user = document.createElement("td"); //creates a cell
const balance = document.createElement("td"); //creates a cell
}
Then these lines add text to the cell:
//these lines add text to the cells
user.textContent = data[i].account;
balance.textContent = data[i].balance;
Then we have:
for (i = 0; i < data.length; i++) {
const row = document.createElement("tr"); //creates a row
const user = document.createElement("td"); //creates a cell inside the row
const balance = document.createElement("td"); //creates a cell
user.textContent = data[i].account;
balance.textContent = data[i].balance;
}
Then we append the elements we created to the table:
row.append(user);
row.append(balance);
tableBody.append(row);
Which results in:
const tableBody = document.getElementById("tablebody");
for (i = 0; i < 20; i++) {
const row = document.createElement("tr"); //creates a row
const user = document.createElement("td"); //creates a cell inside the row
const balance = document.createElement("td"); //creates a cell
user.textContent = data[i].account;
balance.textContent = data[i].balance;
row.append(user);
row.append(balance);
tableBody.append(row);
}
Finally:
async function findData() {
const response = await fetch("https://api.hive-engine.com/rpc/contracts", {
method: "POST",
headers: { "Content-type": "application/json" },
body: JSON.stringify({
jsonrpc: "2.0",
method: "find",
params: {
contract: "tokens",
table: "balances",
query: {"symbol":"BUDS", 'balance': { '$ne' : "0" }},
},
id: 1,
}),
});
const responseJson = await response.json();
const data = responseJson.result
console.log(data);
const tableBody = document.getElementById("tablebody");
for (i = 0; i < 20; i++) {
const row = document.createElement("tr"); //creates a row
const user = document.createElement("td"); //creates a cell inside the row
const balance = document.createElement("td"); //creates a cell
user.textContent = data[i].account;
balance.textContent = data[i].balance;
row.append(user);
row.append(balance);
tableBody.append(row);
}
}
findData()
Then we get:
As you can see we got "20" BUDS holders but they aren't ordered from highest to lowest... we aren't filtering the data, this is easily solved anyway:
we had this variable
const data = responseJson.result
we can change it to
let data = responseJson.result
data = data.sort((a, b) => b.balance - a.balance);
data.sort((a, b) => b.balance - a.balance)
this javascript method orders the elements in the array comparing the balances in each of them.
Then finally:
To learn more about what information can you get (and how) from hive-engine's api you can check this:
https://hive-engine.github.io/engine-docs/tables/#tables-tokens
Here's another way to do this applying sscjs instead of the fetch function:
@fefe99/how-to-use-sscjs-library-to-find-info-in-hive-engine
Another way would be to use axios or an XMLhttprequest.
Leave How to create a table with javascript from hive engine's data. to:
Best Posts From Fefe
We have not curated any of fefe99's posts yet. But you can encourage our curation team to review posts by visiting them regularly and by referring other readers. Because we give priority to frequently read content.
More Posts From Fefe
- Hello World!
- TAG (The Adventure Guild): A game in the Wax Blockchain
- A clicker that gives you free nfts in the testnet
- How to create a python script that runs automatically at startup (WINDOWS)
- How to run a script in the hive blockchain with npm and node.js
- How to create a table with javascript from hive engine's data.
- Rewards from Pizza staking
- How to use sscjs library to find info in hive-engine:
- HK-University Experience #1
- [Zapfic 40] TEAM