0

meu problema é que eu não consigo retornar o results['name'] do request da api. Quando clico no botão ele me retorna o response.data com a seguinte resposta

['Object, Object'] e quando eu seto data.results me retorna o erro : scripts.js:15 Uncaught (in promise) TypeError: Cannot read property 'name' of undefined at scripts.js:15

A ideia é : assim que clicar no botão, me retornar um planeta aleatório.

Se alguém puder ajudar eu agradeço.

let button = document.querySelector('#botao');
let name   = document.querySelector('#Name');

function getPlanet() {

    let randomNumber = Math.floor(( Math.random() * 88 ) + 1 )
    let apiUrl = 'https://swapi.co/api/planets/' + randomNumber

        // integrando API para adicionar a função getPlanet;
    axios.get  (apiUrl).then(( async function ( response ) {
        console.log(response)
      updateInfo ( await response.data.results['name'])
    } ))    
}
function updateInfo(data) {
    name.innerText = data.results
}
        // Evento Click;
button.addEventListener('click', getPlanet);

1 Resposta 1

1

Sua forma de usar a requisição assincrona está meio errada tente assim, outras observações, depois de name, não tem nenhum array results dentro do retorno da api veja

{ name: 'Saleucami',
  rotation_period: '26',
  orbital_period: '392',
  diameter: '14920',
  climate: 'hot',
  gravity: 'unknown',
  terrain: 'caves, desert, mountains, volcanoes',
  surface_water: 'unknown',
  population: '1400000000',
  residents: [],
  films: [ 'https://swapi.co/api/films/6/' ],
  created: '2014-12-10T13:47:46.874000Z',
  edited: '2014-12-20T20:58:18.450000Z',
  url: 'https://swapi.co/api/planets/19/' }

Sendo assim não da para fazer response.data.results['name'] e dentro de updateInfo, você não tem como acesssar results também.

let button = document.querySelector('#botao');
let name   = document.querySelector('#Name');

async function getPlanet() {
    try{
       let randomNumber = Math.floor(( Math.random() * 88 ) + 1 )
       let apiUrl = 'https://swapi.co/api/planets/' + randomNumber

        // integrando API para adicionar a função getPlanet;
       const response = await axios.ge(apiUrl)
       updateInfo(response.data.name)
    }
    catch(error => console.log(error))    
}
function updateInfo(name) {
    name.innerText = name
}
        // Evento Click;
button.addEventListener('click', getPlanet);

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 .