How to output data from API in HTML

Question

I am trying to display the information from the API on the webpage but I can only see it on the console and am unsure why. Any help would be appreciated.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Title</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    </head>

    <body>  
    
        <div class="nutritionContainer">
            <div id="name"</div>
            <div id="calories"</div>
            
    <script src="nutrition.js" type="module"></script>
    </body>
</html>



fetch("https://nutrition-by-api-ninjas.p.rapidapi.com/v1/nutrition?query=coffee", {
    "method": "GET",
    "headers": {
        "x-rapidapi-host": "nutrition-by-api-ninjas.p.rapidapi.com",
        "x-rapidapi-key": "my_key"
    }
})
.then(response => response.json())
.then(response => {
    console.log(response);
    
    document.getElementById('name').innerHTML = response.content;
    document.getElementById('calories').innerHTML = response.content;

})
.catch(err => {
    console.log(err);
});

Is what you show how your page is actually written? That is, is that javascript really where you show it? Also, note that the <meta> tag does not use and does not need a closing slash and never has in any HTML specification. — Rob
– Rob, Commented Oct 10, 2021 at 23:40

Pratham · Accepted Answer · 2021-10-11 08:27:15Z

1

The response is an array of object.

Suppose you want to print calories, you can do it something like this

document.getElementById('calories').innerHTML = response.data[0].calories;

answered Oct 11, 2021 at 8:27

Pratham

5454 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

m4n0 Over a year ago

Please replace the image with the actual code.

Collectives™ on Stack Overflow

How to output data from API in HTML

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related