'I'm using and api and it's showing me object Object instead of the variable

as i said in the title, i'm using an api, here is the html

<html lang="en">
 
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <!-- JQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!-- Popper -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
        integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG"
        crossorigin="anonymous"></script>
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
        integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc"
        crossorigin="anonymous"></script>
 
    <title>Ejemplo consumo web service con FETCH </title>
</head>
 
<body>
    <  <div class="container">
        <div class="row">
            <button class="btn btn-primary" id="btn-cargar">Cargar Información</button>            
        </div>
        <div class="row">
            <div id="info" class="text-center">
                <h1></h1>
            </div>
        </div>   
        
    </div>
    <script src="js/carga_1.js"></script>
</body>
</html>

and here is the code of the js

$("#btn-cargar").click(function (event) {
  event.preventDefault();
 
  var url = "https://api.punkapi.com/v2/beers/random";

    fetch(url)
        .then(response => response.json())
        .then(data => 
            {
                var $nombre_cerveza = $('<h1>').text(data[0].name);
                var $grados = "Grados: " + $('<p>').text(data[0].abv);
 
                var $foto_cerveza = $("<p><img src='"+data[0].image_url+"'>");
 
                $("#info").empty();
                $('#info')
                    .append($nombre_cerveza)
                    .append($grados)
                    .append($foto_cerveza);
 
            })
        .catch(error => console.error(error));
 
});

it shows me the name as it should, but in the abv it shows "Grados: [object Object]" and i want it to show the abv in numbers, does anyone knows a way to fix this? i'm sorry that all of it is in spanish

apivisual-studio-code


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions