Estou tentando criar um front-end com base na API do star wars, meu plano era criar um objeto para então mostrar na tela. Quando faço uma requisição(https://swapi.co/films por exemplo),algumas propriedades do objeto vem como um array de links. Então pensei em chamar função dentro da requisição para fazer outras requisições usando o AXIOS, porem quando retorno os dados, eles voltam todos juntos.Como posso fazer que as propriedades dos objetos recebam os dados corretamente?
Meu código segue abaixo:
const urlAPI = 'https://swapi.co/api/'
async function getInformation(arrayURL) {
arrayData = []
promisses = []
arrayURL.forEach(element => {
console.log(element)
const promisse = axios(element)
.then(response => response)
.then(resp => arrayData.push(resp.name))
promisses.push(promisse)
})
axios.all(promisses)
console.log(arrayData)
return await arrayData;
}
axios.get(`${urlAPI}films`)
.then(response => {
return (response.data.results)
})
.then(resp => {
// console.log(resp)
resp.forEach(element => {
if (element.hasOwnProperty('planets')) {
element.planets = getInformation(element.planets)
console.log(element.planets)
}
})
})
.then(data => {
console.log(data)
})
.catch(error => {
console.log(error)
})