0

Is my first time when i'm trying to use a simple API and can't get a good result. I used an example from here: Write something that can read this API Url Every change I do give me 4 as a result and nothing in console. Please, can you give me a hint?

Thanks!

<!DOCTYPE html>
<html>

<body>
first
<div id="fastest">
     <script> fetch("https://bitcoinfees.earn.com/api/v1/fees/recommended") // Call the fetch function passing the url of the API as a parameter
    .then((resp) => resp.json()) // Transform the data into json
    .then(function(data) {
        // Your code for handling the data you get from the API
        document.write(data.fastestFee); //And since it is just an object you can access any value like this
    })
    .catch(function(err) {
        // This is where you run code if the server returns any errors (optional)
        console.log(err)
    });
    </script> 
    </div>

    </br>second

    <div id="30">
    <script> fetch("https://bitcoinfees.earn.com/api/v1/fees/recommended") // Call the fetch function passing the url of the API as a parameter
    .then((resp) => resp.json()) // Transform the data into json
    .then(function(data) {
        // Your code for handling the data you get from the API
        document.write(data.halfHourFee); //And since it is just an object you can access any value like this
    })
    .catch(function(err) {
        // This is where you run code if the server returns any errors (optional)
        console.log(err)
    });
    </script> 
    </div>

    </br>3th

    <div id="60">
    <script> 
    fetch("https://bitcoinfees.earn.com/api/v1/fees/recommended") // Call the fetch function passing the url of the API as a parameter
    .then((resp) => resp.json()) // Transform the data into json
    .then(function(data) {
        // Your code for handling the data you get from the API
        document.write(data.hourFee); //And since it is just an object you can access any value like this
    })
    .catch(function(err) {
        // This is where you run code if the server returns any errors (optional)
        console.log(err)
    });
    </script> 
    </div>



</body>
</html>
Munteanu Andreea
  • 3
  • 2

1 Answers1

1

With document.write you're replacing your existing html elements with the value of the api response.

I've reorganized a bit the code, placed the js in a single function, and replaced the document.write with document.getElementById(elemId).textContent which sets the current text of the selected element. Here's the result:

// Call the method passing the 3 possible values
getFee("fastest");
getFee("halfHour");
getFee("hour");

function getFee(type) {
  fetch("https://bitcoinfees.earn.com/api/v1/fees/recommended") // Call the fetch function passing the url of the API as a parameter
    .then((resp) => resp.json()) // Transform the data into json
    .then(function(data) {
      // Your code for handling the data you get from the API
      if (type === "fastest") {
        document.getElementById("fastest").textContent = data.fastestFee;
      } else if (type === "halfHour") {
        document.getElementById("30").textContent = data.halfHourFee;
      } else if (type === "hour") {
        document.getElementById("60").textContent = data.hourFee;
      }
    })
    .catch(function(err) {
      // This is where you run code if the server returns any errors (optional)
      console.log(err)
    });
}
<span>fastest</span>
<div id="fastest">

</div>

<br>
<span>halfHour</span>

<div id="30">

</div>

<br>
<span>Hour</span>

<div id="60">
</div>
LS_
  • 6,763
  • 9
  • 52
  • 88