CODEWITHSUNDEEP
htmlapi
swagadactel
swagadactel

Reputation: 11

How to output data from API in HTML

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);
});

Upvotes: 0

Views: 690

Answers (1)

Pratham
Pratham

Reputation: 537

The response is an array of object.

enter image description here

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

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

Upvotes: 1

Related Questions