How to show in html, api data which is fetched with javascript

Question

I have a working javascript code which fetch api data. I don't know how to show the data in html code and I need help with that. Here is the code:

<script>

fetch("https://v3.football.api-sports.io/{endpoint}", {
    "method": "GET",
    "headers": {
        "x-rapidapi-host": "v3.football.api-sports.io",
        "x-rapidapi-key": "7353701748e805612af548372b8dc704"
    }
})
.then(response => {
    console.log(response);
})
.catch(err => {
    console.log(err);
});
    '

</script>

score 0 · Answer 1 · answered Nov 25 '20 at 08:49

You need to do JSON parsing if you get some data in JSON format (see the code below)
To display the data, you have numerous options. One of them is to have a div in your html and then dump the data in it, like here:

fetch("https://v3.football.api-sports.io/{endpoint}", {
    "method": "GET",
    "headers": {
      "x-rapidapi-host": "v3.football.api-sports.io",
      "x-rapidapi-key": "7353701748e805612af548372b8dc704"
    }
  })
  .then(response => response.json()) // NEW!
  .then(data => { // NEW!
    const div = document.getElementById("mydata") // NEW!
    div.innerText = JSON.stringify(data); // NEW!
  })
  .catch(err => {
    console.log(err);
  });

<html>

<body>
  <div id="mydata"></div>
</body>

</html>

It does not look pretty this way, so you need to take the specific parts of your data and put them into HTML as needed, instead of pushing it all as a single string.

P.S. JSON.stringify converts an object or array into a string

Hey @simongorce, please upvote and accept my answer if it helped you. Thanks! :) — IvanD, Dec 18 '20 at 20:39

How to show in html, api data which is fetched with javascript

1 Answers1