Fix Fetch data form API and print it on HTML with JavaScript

Question

I want to fetch data from API and show it on HTML by elementID with JavaScript, Please help what I wrong in this code below.

<div id="priceChange"></div>

<script>
setInterval(tradestime, 5000);
function tradestime(){
fetch("https://api.binance.com/api/v1/ticker/24hr?symbol=LTCUSDT") 
.then(
    (res) => {
        const data = res.json();
    }
)    
document.getElementById("priceChange").innerHTML = data.PriceChange;    
}
</script>

Please fix this code.

Does this answer your question? [How to return the response from an asynchronous call](https://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call) — Rifky Niyas, Dec 05 '21 at 08:51

DecPK · Answer 1 · 2021-12-05T09:02:19.347

0

You should use res.json() because you want data in JSON format. which will return promise and then you can get data. You should read fetch docs

fetch("https://api.binance.com/api/v1/ticker/24hr?symbol=LTCUSDT")
 .then(res => res.json())
 .then(data => el.innerHTML = data.priceChange)

key should be priceChange not PriceChange.

You can use parseFloat + toFixed as:

el.innerHTML = Number.parseFloat(data.priceChange).toFixed(2);

setInterval(tradestime, 5000);
const el = document.getElementById("priceChange");

function tradestime() {
  fetch("https://api.binance.com/api/v1/ticker/24hr?symbol=LTCUSDT")
    .then(res => res.json())
    .then(data => el.innerHTML = data.priceChange)
}

<div id="priceChange"></div>

You can also use async-await here

setInterval( tradestime, 5000 );
const el = document.getElementById( "priceChange" );

async function tradestime() {
  const res = await fetch( "https://api.binance.com/api/v1/ticker/24hr?symbol=LTCUSDT" )
  const data = await res.json();
  el.innerHTML = data.priceChange;
}

<div id="priceChange"></div>

edited Dec 05 '21 at 09:02

answered Dec 05 '21 at 08:37

DecPK

24,537
6
26
42

It's working, but this number shows like 7.10000000. I want to show it like 7.10 How do I do that :( ?? – MSU Rubel Dec 05 '21 at 08:54
then you can use `el.innerHTML = Number.parseFloat(data.priceChange).toFixed(2);` Answer edited. Have a look – DecPK Dec 05 '21 at 09:02
Thank you it's working, one more thing please please help. how I remove "-" from -0.76 that showing on data.priceChange ?? – MSU Rubel Dec 05 '21 at 09:17
just use `Math.abs` simple – DecPK Dec 05 '21 at 09:18
yes, I get it, and working fine. The last one is how I get "-" from -0.76 that shows on data.priceChange ?? – MSU Rubel Dec 05 '21 at 09:36
ok, I solved it with substring(0, 1), thank you for your help – MSU Rubel Dec 05 '21 at 09:50

Fix Fetch data form API and print it on HTML with JavaScript

1 Answers1