I have retrieved JSON data from Coingecko API, I wish to map it into a table on an ejs file, does anybody know how I would do so?
GET for the EJS page with the API fetch inside (Located in a file called indexRoutes.js Location from root folder: routes/indexRoutes.js):
router.get("/crypto", ensureAuthenticated,(req, res) => {
async function getCoins(){
const api_url =
"https://api.coingecko.com/api/v3/coins/markets?vs_currency=gbp&order=market_cap_desc&per_page=100&page=1&sparkline=false";
let fetch_response = await fetch(api_url);
let json = await fetch_response.json();
console.log(json);
}
getCoins();
res.render("crypto");
});
I have not yet added a table into the page but here is the already existing code on the page for reference. Filename (crypto.ejs) Location from root folder (views/pages/crypto.ejs):
<%- include ("./includes/_header.ejs"); %>
<container class="pt-5">
<div class="row mt-5 d-flex justify-content-center">
<div class="col-md-5">
<div class="card card-body">
<h1 class="d-flex justify-content-center">Cryptocurrency Q&A</h1>
<!--Accordian for Emissions Q&A-->
<div class="row d-flex justify-content-center">
<div
class="col-md-7 m-1 bg-white parathree text-black text-center p-3 mt-4"
>
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#flush-collapseOne"
aria-expanded="false"
aria-controls="flush-collapseOne"
>
What is a Cryptocurrency?
</button>
</h2>
<div
id="flush-collapseOne"
class="accordion-collapse collapse"
aria-labelledby="flush-headingOne"
data-bs-parent="#accordionFlushExample"
>
<div class="accordion-body">
<p>
A Cryptocurrency is a digital currency or a decentralized
system that has been secured by utilizing cryptography.
Cryptocurrency is seen widely as an investment platform
that is easily accessible as long as you are over the age
of 18. Cryptocurrency started because people were getting
fed up with the banks having control of all of their
transactions. Groups of cryptographers started to create
decentralized methods of payment called Cryptocurrencies,
none of the starting ones got enough momentum to become
big, until a still unknown identity named "Satoshi
Nakamoto" created what is now known as Bitcoin.
</p>
<p>
They wrote a piece of literature called "Bitcoin: A
Peer-to-Peer Electronic Cash System", which describes how
Bitcoin aims to create a decentralized version of the
financial sector which would once again empower the people
instead of the banks by using online payments that allow
Bitcoin. These decentralized systems are named
Blockchains. One downside to Cryptocurrency due to it
being electronic, it can be replicated easily until it is
worthless, therefore it must have limited supply and be
unique for it to be of any value.
</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#flush-collapseTwo"
aria-expanded="false"
aria-controls="flush-collapseTwo"
>
What is a Blockchain and what are its benefits?
</button>
</h2>
<div
id="flush-collapseTwo"
class="accordion-collapse collapse"
aria-labelledby="flush-headingTwo"
data-bs-parent="#accordionFlushExample"
>
<div class="accordion-body">
<p>
Blockchains are essential for maintaining the "purpose" of
Cryptocurrency. They are essentially an electronic ledger
that contains all of the transactions made with every
Cryptocurrency whilst keeping the owner anonymous. The
wallet ID will be kept on each transaction, however, any
details that belong to the owner of said wallet will
remain unavailable. Therefore, hacking into somebody's
account is much harder.
</p>
<p>
For example, if someone tried to hack into your bank
account, empty it and change the data, it would be their
word against yours and the bank might assume that the
withdrawal was made by you as there is only one record to
change and the hacker would have changed it due to the
system being centralized, whereas with the Blockchain,
everybody who owns that Cryptocurrency, has a record of
the transactions made, therefore, the hacker would have to
change over half of the data, as Cryptocurrency decisions
are made final with over 51 percent of the record holders
opinions.
</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingThree">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#flush-collapseThree"
aria-expanded="false"
aria-controls="flush-collapseThree"
>
How much of the economy consists of Cryptocurrency?
</button>
</h2>
<div
id="flush-collapseThree"
class="accordion-collapse collapse"
aria-labelledby="flush-headingThree"
data-bs-parent="#accordionFlushExample"
>
<div class="accordion-body">
<p>Cryptocurrency is 7 percent of all of the worlds money in total</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-5">
<div class="card card-body">
<h1>Insert Table/List of top Cryptos here. (Using CoinGecko API)</h1>
</div>
</div>
</div>
</container>
<%- include ("./includes/_footer.ejs"); %>
You will need to change a couple things here.
To start you are receiving the response from the API, however you are not accessing the response outside of your nested function "getCoins". You will need to move your call to res.render() inside of the async function.
Once you have access to the data before the render, you can pass it to the ejs page by passing an object as a second argument to call to res.render().
After applying these changes your code will look something like:
router.get("/crypto", ensureAuthenticated, (req, res) => {
async function getCoins(){
const api_url =
"https://api.coingecko.com/api/v3/coins/markets?vs_currency=gbp&order=market_cap_desc&per_page=100&page=1&sparkline=false";
let fetch_response = await fetch(api_url);
let json = await fetch_response.json();
console.log(json);
res.render("crypto", { data: json });
}
getCoins();
});
Now that you have data passed to the page, you should be able to access it in between the code tags:
<%= data.whateverIsInside %>
And that should allow you to display it on the page. Would recommend checking out these resources on EJS: