I am trying to get API data in JSON format to my website. How can I take the required info and send it to a div in the html page?

Question

This is my js file :

window.onload=function(){

var anima = document.getElementById("crypto");
var ret = document.getElementById("btn");

ret.addEventListener("click",function(){

var ourRequest = new XMLHttpRequest() ;
ourRequest.open('GET','https://api.cryptonator.com/api/full/btc-usd');
ourRequest.onload = function(){

    var fdata = JSON.parse(ourRequest.responseText);
    //renderHTML(fdata);
    console.log( fdata);
};

ourRequest.send()

});

When I click on the button the BTC price must be visible in the div area of the hmtl page.

How can I achieve this ? This is the url https://api.cryptonator.com/api/full/btc-usd

The id of the div is crypto.

Answer 1

window.onload=function(){

var anima = document.getElementById("crypto");
var ret = document.getElementById("btn");

ret.addEventListener("click",function(){

var ourRequest = new XMLHttpRequest() ;
ourRequest.open('GET','https://api.cryptonator.com/api/full/btc-usd');
ourRequest.onload = function(){

    var fdata = JSON.parse(ourRequest.responseText);
    // anima – your div with #crypto
    // fdata.ticker.price – your path in api to BTC price;
    anima.textContent = fdata.ticker.price;
};

ourRequest.send()

});

You can also try innerHTML, if you wan insert html tags in the future.

https://developer.mozilla.org/ru/docs/Web/API/Node/textContent

https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML