JAVASCRIPT - Accessing property that contains api link

Question

Good evening! I cannot access the title property inside the films as I do to make this request?

Planet: Hoth

Total population: USSR

Climate: Frozen

Land: tundra, ice caves, mountain ranges

Movie appearance: https://swapi.co/api/films/2/

this is the return I have of the request but wanted to return the name of the films in question. I have already researched here and in other forums but I could not solve yet. in case someone can help me I am grateful. vlw guys!

code:

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

        // integrando API para adicionar a função getPlanet;
    axios.get (apiUrl).then(( function ( response ) {        
      updateInfo (response.data)

    } )) 

}

    function updateInfo(data) {   

                name.innerText = 'Planeta: ' + data.name;
                population.innerText = 'População total: ' + data.population;
                climate.innerText = 'Clima: ' + data.climate;
                terrain.innerText = 'Terreno: ' + data.terrain;    
                films.innerText = 'Aparição em filmes: ' + data.films.title;
        }

            // Evento Click;
    button.addEventListener('click', getPlanet);

Answer 1

Can use async? Whereas you are using let I believe compatibility with IE is not a priority, so let’s go.

Inside the route response /planets, you own the property films which is an array with the urls to get more information from these movies. No use trying to access the property title of that url, the url itself is just a string, you need to make the request for them as well.

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

    // integrando API para adicionar a função getPlanet;
    let planet = await axios.get(apiUrl)
    let films = await Promise.all(
        planet.data.films.map(film => axios.get(film))
    )

    let planetData = planet.data
    let filmsData = films.map(film => film.data)

    updateInfo(planetData, filmsData)
}

Now yes you have indeed the answer of the route /films. Do not forget that films is an array, if you want the property title of the first film, you’ll have to use films[0].data.title or in the case of the example, filmsData[0].title:

function updateInfo(planetData, filmsData) {
    let titles = filmsData.map(filmData => filmData.title)

    name.innerText = 'Planeta: ' + planetData.name;
    population.innerText = 'População total: ' + planetData.population;
    climate.innerText = 'Clima: ' + planetData.climate;
    terrain.innerText = 'Terreno: ' + planetData.terrain;
    films.innerText = 'Aparição em filmes: ' + titles.join(', ');
}