Display Data from fetch api

Question

Hi i want to fetch data from avascan api and display it in html, but i am not able to do this. I have tried fetch api, json and ajax ways but none worked for me. Any suggestions? This is my html https://avascan.info/api/v1/home/statistics

const api_url = 'https://avascan.info/api/v1/home/statistics';


async function getAVA() {
  const response = await fetch(api_url);
  const data = await response.json();
  const {
    blockchains,
    validators
  } = data;
  document.getElementById('lat').textContent = blockchains.toFixed(2);
  document.getElementById('lon').textContent = validators.toFixed(2);
}

getAVA();

setInterval(getAVA, 1000);

<h1>What the stats?</h1>

<p>
  blockchains: <span id="lat"></span>°<br /> validators: <span id="lon"></span>°
</p>

<div id="issMap"></div>

You are probably being hit by a CORS error. is your javascript code on the same domain as the API (avascan.info/api/v1/home/statistics)? — Abbas
– Abbas, Commented Aug 24, 2021 at 18:35
Does this answer your question? How does Access-Control-Allow-Origin header work? — showdev
– showdev, Commented Aug 24, 2021 at 18:42

GoJoe · Accepted Answer · 2021-08-24 21:19:49Z

0

You are getting a CORS protection error, as mentioned before.

However it seems you need to use a GraphQL API: https://graphql.avascan.info/

Look at this quick example:

      async function getAVA() {

        fetch('https://graphql.avascan.info', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
            query: `
            query {
                stats {
                    priceAvaxUsd,
                    connectedNodes
                }
            }`
            }),
            })
            .then((res) => res.json())
            .then((result) => console.log(result));
      }

      getAVA();

answered Aug 24, 2021 at 21:19

GoJoe

547 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

hitesh Pahwa Over a year ago

I also need total no. Of validators and blockchains to display them in html, seems like it cannot retrive them, btw how do I show this console. Log data in html?

GoJoe Over a year ago

It seems you will need to wait to accomplish what you need. The GraphQL API is deprecated and the new one is not yet available. docs.avascan.info/quickstart-graphql#api-version-0-3

GoJoe Over a year ago

to show the data in html instead of console.log, you would need to move these commands document.getElementById('lat').textContent = result.data.stats.connectedNodes.toFixed(2); inside the last then

Roosevelt Jointer · Accepted Answer · 2021-08-24 18:49:49Z

0

Looks like you have this error: No 'Access-Control-Allow-Origin' header is present on the requested resource.

This is a CORS protection and you may need certain requirements to fetch this dat such an api key, or update configuration your options in the fetch method

Here is a resource to help

answered Aug 24, 2021 at 18:49

Roosevelt Jointer

12 bronze badges

Collectives™ on Stack Overflow

Display Data from fetch api

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related