PROBLEMA
Tal como digo en mi comentario, tu problema (y siempre lo es) es de asincronía.
Si hacemos un ejercicio mental de lo que está sucediendo con tu código, tienes una lista (array) de ítems, y por cada uno de ellos realizas una petición tipo get
usando axios
, que es una librería http
basada en Promesas. Esto significa que el resultado de dicha petición estará disponible en un momento futuro incierto, haciendo que la asignación del resultado del método map
a tu variable nuevo_arreglo
no tenga realmente los datos devueltos de dicha o dichas Promesas. Incluso si las mismas retornaran inmediatamente, el contenido de ellas sería un Objeto de tipo Promesa y no el resultado procesado de la misma.
SOLUCIÓN
Una posible solución es usar el método Promise.all
para procesar el nuevo arreglo una vez que todas las Promesas del arreglo original hayan sido procesadas. Sin embargo, dado que Promise.all
devuelve a su vez una Promesa, la forma correcta de seguir trabajando con el resultado de la misma es dentro del método then()
de dicha Promesa.
// INCORRECTO
let nuevo_arreglo = main_res.results.map( item => {
axios.get(url).then(res => { // <= axios.get devuelve una Promesa
return res; // <= este return no devuelve nada a map, sino a la Promesa
});
});
// CORRECTO
// Promise.all recibe como argumento un iterable cuyos elementos son Promesas
Promise.all(main_res.results.map( item => { return axios.get(url) }))
.then(nuevo_arreglo => { // el resultado será un arreglo nuevo con los resultados de cada Promesa (siempre que todas hayan sido resueltas)
nuevo_arreglo.forEach(result => {
console.log(result.data); // el resultado está en la propiedad data del objeto devuelto
});
});
Podemos ver un ejemplo en funcionamiento, usando la API de randomuser.me, para procesar una lista de peticiones:
let items = [
'https://randomuser.me/api/?inc=gender,name,nat&nat=US&results=1',
'https://randomuser.me/api/?inc=gender,name,nat&nat=ES&results=1',
'https://randomuser.me/api/?inc=gender,name,nat&nat=FR&results=1'
];
Promise.all(items.map(axios.get))
.then(nuevo_arreglo => {
nuevo_arreglo.forEach(result => {
console.log(result.data);
});
});
.as-console-wrapper {
min-height: 100%;
top: 0;
}
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
Otra forma de resolver el problema es usando async / await
y un bucle for ... of
. Pero para que esto funcione, tu código debe ser ejecutado en un entorno tipo async
(nótese que he envuelto la función anónima entre paréntesis y al final he puesto doble paréntesis para indicar su ejecución: (func_anonima)()
), por ejemplo:
let items = [
'https://randomuser.me/api/?inc=gender,name,nat&nat=US&results=1',
'https://randomuser.me/api/?inc=gender,name,nat&nat=ES&results=1',
'https://randomuser.me/api/?inc=gender,name,nat&nat=FR&results=1'
];
// entorno async / await autoejecutado
(async () => {
let nuevo_arreglo = [];
// siempre que usamos async / await debemos usar try / catch para el manejo de Promesas
try {
for ( let item of items ) {
let result = await axios.get(item);
nuevo_arreglo.push(result.data);
}
console.log(nuevo_arreglo);
}
catch(e) {
console.log(e.message);
}
})();
.as-console-wrapper {
min-height: 100%;
top: 0;
}
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
Espero que esto te ayude a resolver el problema.
axios
no se resolverán de forma síncrona, por lo cual al momento en que intentas usar tu variable, la misma no contiene la data que crees que debe contener.