Document

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: ```html Document ``` Now we need to set the skeleton for our table adding these few lines between the body tags: ```

Users	BUDS

``` Then finally: ``` Document

Users	BUDS

``` We can open the file in a browser and check everything is okay: ![image.png](https://files.peakd.com/file/peakd-hive/fefe99/23t8AjT1YZRUUq4nihBxZGZ7Z9vH3iqvRbKcwNCXTANGETTVeHDnYdjzua2PXhS5G4TsK.png) 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: ``` ``` ``` Document

Users	BUDS

``` 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: ![image.png](https://files.peakd.com/file/peakd-hive/fefe99/23tGVvM3Wzumfm5ZzCo41iuHUiH1Y783WDnKdvQUuq2DVXJgy5KmJty7msGAqHHZtHUpF.png) 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: ![image.png](https://files.peakd.com/file/peakd-hive/fefe99/23sxpMFs9uJyHDJGas2oZFgembg9bAv2frSCeSARtMpijnx46RBxUudT7yymHGybNk5A1.png) 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: ![image.png](https://files.peakd.com/file/peakd-hive/fefe99/23tSyukFYEYsft8w6dmd6cWxV9ArKgVJ89Y5GZJbQnC1UfVwLEnwPSd3pSecPb27jFVLj.png) 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: https://peakd.com/hive-104341/@fefe99/how-to-use-sscjs-library-to-find-info-in-hive-engine Another way would be to use axios or an XMLhttprequest.