Return Undefined in html for JSON object request

Question

I’m trying to return JSON objects from an api, only when the elements are rendered in HTML, the value passes to Undefined. I believe it is something with the request in appenChild, since it returns the stylized objects normally.

// Botão busca
let btn = document.querySelector(".btn-busca");
btn.addEventListener("click", getEstadias);

function getEstadias() {

    fetch("https://api.sheety.co/30b6e400-9023-4a15-8e6c-16aa4e3b1e72")
        .then(res => res.json())
        .then(data => {

            // Lista de estadias
            let listEl = document.querySelector(".container-cards");

            let imgItem = document.createElement("div");
            imgItem.classList.add("image");
            // Criando o elemento para armazenar a foto da estadia
            let imgEl = document.createElement("img");
            imgEl.setAttribute("src", data.photo);  
            // Criando o tipo de estadia
            let tipoEl = document.createElement("span");
            tipoEl.appendChild(document.createTextNode(data.property_type));
            tipoEl.classList.add("etiqueta");
            // Adicionando os itens ao container da imagem do item
            imgItem.appendChild(imgEl);
            imgItem.appendChild(tipoEl);

            // Criando texto e preço
            let infoItem = document.createElement("div");
            infoItem.classList.add("texto");
            // Criando depoimento
            let textEl = document.createElement("h3");
            textEl.appendChild(document.createTextNode(data.name));
            textEl.classList.add("depoimento");
            // Criando preço
            let precoEl = document.createElement("p");
            precoEl.appendChild(document.createTextNode(data.price));
            precoEl.classList.add("preco");
            // Adicionando os itens no container do texto do item
            infoItem.appendChild(textEl);
            infoItem.appendChild(precoEl);

            // Criando o card
            let card = document.createElement("div");
            card.classList.add("card");
            card.appendChild(imgItem);
            card.appendChild(infoItem);

            // Colocando todos os elementos dentro do card
            listEl.appendChild(card);

        });
}

<!-- BOTÃO PARA CHAMAR OS ITENS -->
<button class="component btn-busca" type="submit">Buscar</button>

<!-- CONTAINER DOS CARDS -->
<main>
   <div class="container container-cards">
    
   </div>
</main>

Answer 1

The return data is an array of objects, where each object has an index. Doing only, for example, data.photo will return undefined because the object data returned in fetch does not own the property photo.

Since it is an array of objects, you have to iterate them, and you can use forEach for this, passing in the function the same name data not to have to rename all the data from where you want to get the properties:

let btn = document.querySelector(".btn-busca");
btn.addEventListener("click", getEstadias);

function getEstadias() {

    fetch("https://api.sheety.co/30b6e400-9023-4a15-8e6c-16aa4e3b1e72")
        .then(res => res.json())
        .then(data => {

            data.forEach(function(data){
               // Lista de estadias
               let listEl = document.querySelector(".container-cards");
   
               let imgItem = document.createElement("div");
               imgItem.classList.add("image");
               // Criando o elemento para armazenar a foto da estadia
               let imgEl = document.createElement("img");
               imgEl.setAttribute("src", data.photo);  
               // Criando o tipo de estadia
               let tipoEl = document.createElement("span");
               tipoEl.appendChild(document.createTextNode(data.property_type));
               tipoEl.classList.add("etiqueta");
               // Adicionando os itens ao container da imagem do item
               imgItem.appendChild(imgEl);
               imgItem.appendChild(tipoEl);
   
               // Criando texto e preço
               let infoItem = document.createElement("div");
               infoItem.classList.add("texto");
               // Criando depoimento
               let textEl = document.createElement("h3");
               textEl.appendChild(document.createTextNode(data.name));
               textEl.classList.add("depoimento");
               // Criando preço
               let precoEl = document.createElement("p");
               precoEl.appendChild(document.createTextNode(data.price));
               precoEl.classList.add("preco");
               // Adicionando os itens no container do texto do item
               infoItem.appendChild(textEl);
               infoItem.appendChild(precoEl);
   
               // Criando o card
               let card = document.createElement("div");
               card.classList.add("card");
               card.appendChild(imgItem);
               card.appendChild(infoItem);
   
               // Colocando todos os elementos dentro do card
               listEl.appendChild(card);

            });
        });
}

<!-- BOTÃO PARA CHAMAR OS ITENS -->
<button class="component btn-busca" type="submit">Buscar</button>

<!-- CONTAINER DOS CARDS -->
<main>
   <div class="container container-cards">
    
   </div>
</main>