0

Estou tentando utilizar o fetch para consumir os dados de uma api, porém ao tentar acessar alguns atributos do objeto, está dando UNDEFINED:

const url = 'https://api.sheety.co/30b6e400-9023-4a15-8e6c-16aa4e3b1e72';

fetch(url)
  .then(response => response.json())
  .then(result => {
    const dados = JSON.stringify(result);
    // console.log(response.name);


    document.getElementById('wrap').innerHTML = dados.name;
  })
  .catch(function(err){
    console.error(err);
  })

Como está sendo renderizado o html:

inserir a descrição da imagem aqui

0

1 Resposta 1

1

Primeiro lugar, está transformando em string um objeto, então não pode acessar as propriedades dele se foi convertido para uma string (dados.name por exemplo).

Segundo, o resulta é uma array, então precisa de um índice (`result[0] por exemplo) ou fazer uma iteração com o objeto (for, foreach, etc).

const url = 'https://api.sheety.co/30b6e400-9023-4a15-8e6c-16aa4e3b1e72';

fetch(url)
  .then(response => response.json())
  .then(result => {
    const dados = JSON.stringify(result);
    // console.log(response.name);

    // aqui os dados em formato string
    document.getElementById('wrap').innerHTML = dados;
    // aqui o valor de name, como é um array, o valor do primeiro elemento
    document.getElementById('valor').innerHTML = result[0].name;
    // aqui, todos os names:
    result.forEach(function(element) {
       document.getElementById('todosValores').innerHTML += "<img src='" + element.photo + "'>" +  element.name + "<br/>";
    });
    
  })
  .catch(function(err){
    console.error(err);
  })
div {
   border: solid 1px #000;
   display: inline-block;
   margin: 2px;
   padding: 5px;
}

img {
  width: 50px;
  height: 50px
}
<div id="valor">
</div>

<div id="todosValores">
</div>

<div id="wrap">
</div>

5
  • Tem necessidade de transformar em string? Commented 8/07/2019 às 20:44
  • não, coloquei no código apenas para exemplificar, o result já vem pronto pra ser usado :) Commented 8/07/2019 às 20:48
  • Eu fazendo um for, pq aparece somente um nome? for(const dados of result) { console.log(dados.name); document.getElementById('wrap').innerHTML = dados.name; } Commented 8/07/2019 às 20:51
  • veja o exemplo que coloquei com foreach Commented 8/07/2019 às 20:53
  • Muito bom, obrigado! Commented 8/07/2019 às 20:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .