How to fetch data from api?

Question

I want to fetch data (particularly market cap)from api and display it inside my div. But my html diplays no data on execution. What could I be doing wrong?

<text id="result"></text>

  <script>
  // API for get requests 

  let fetchRes = fetch(
        "https://api.lunarcrush.com/v2?data=assets&key=n8dyddsipg5611qg6bst9&symbol=AVAX"); 

   // fetchRes is the promise to resolve 

   // it by using.then() method 

   fetchRes.then((res) => res.json())
    .then((result) => {
      console.log(result);
      document.getElementById('result').innerHTML = result.config.data.0.market_cap;
    })
    .catch(error => {
      console.log(error);
    })
      
    </script>

score 3 · Accepted Answer · answered Aug 26 '21 at 17:44

3

Two suggestions:

Why not just chain the .then() directly to the fetch()?
You seem to have a bit of confusion on how to access the data in your structure - what you're after is result.data[0].market_cap.

// API for get requests 

let fetchRes = fetch("https://api.lunarcrush.com/v2?data=assets&key=n8dyddsipg5611qg6bst9&symbol=AVAX")
  .then((res) => res.json())
  .then((result) => {
    console.log(result);
    document.getElementById('result').innerHTML = result.data[0].market_cap;
  })
  .catch(error => {
    console.log(error);
  })

<text id="result"></text>

Aside: you should probably invalidate your API key that you've included here, as it's now out in public and can be used to forge requests as you to this API.

answered Aug 26 '21 at 17:44

esqew

42,425
27
92
132

1

Yes it worked thanks, one more question I want to display the number as 7.69Billion instead of 7692083188.is there any possible way it can be acheived? – Prime Aug 26 '21 at 17:53
1

@Prime That would be outside the scope of the question as you've asked it, but I would encourage you to use the search functionality for questions like this that have already been asked, as it would be a duplicate of [how to convert numbers to million in javascript](https://stackoverflow.com/questions/36734201/how-to-convert-numbers-to-million-in-javascript) – esqew Aug 26 '21 at 17:58

score 1 · Answer 2 · answered Aug 26 '21 at 17:48

1

I am using jQuery Framework to do this easily. Check the code below.

<script>
    $.get(
        "https://api.lunarcrush.com/v2",
        {
            data: "assets",
            key: "n8dyddsipg5611qg6bst9",
            symbol: "AVAX"
        },
        function (result){
            data = JSON.parse(result);
        }
    );
</script>

You can use jQuery by adding the following code in your <head> tag.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

answered Aug 26 '21 at 17:48

Paurush Sinha

155
9

1

Why suggest adding an additional 31kb of overhead for a library that would only be used for a singular purpose, especially when support for the Fetch API is [pretty ubiquitous nowadays](https://caniuse.com/fetch)...? – esqew Aug 26 '21 at 17:50

score 1 · Answer 3 · answered Aug 26 '21 at 17:48

Use result.config.data[0].market_cap; instead of result.config.data.0.market_cap;

let fetchRes = fetch( 
"https://api.lunarcrush.com/v2?data=assets&key=n8dyddsipg5611qg6bst9&symbol=AVAX"); 

  

        // fetchRes is the promise to resolve

        // it by using.then() method

        fetchRes.then((res) => res.json())
    .then((result) => {
        console.log(result);
        document.getElementById('result').innerHTML = result.config.data[0].market_cap;
    })
    .catch(error => {
        console.log(error);
    });

score 1 · Answer 4 · answered Aug 26 '21 at 18:33

You can make it cleaner and simpler:

const fetchData = async(url) => (await fetch(url)).json();

fetchData("https://api.lunarcrush.com/v2?data=assets&key=n8dyddsipg5611qg6bst9&symbol=AVAX")
  .then(res => {
    result.innerText = res.data[0].market_cap;
  })
  .catch(err => {
    console.log(err);
  });

<text id="result"></text>

How to fetch data from api?

4 Answers4