El problema es que el console.log
se ejecuta antes que la Promise
se resuelva.
Para ver los datos reales una vez se ha completado la request al servidor, debes fijarte dentro del then
que se ejecutará una vez esté la request completada.
function enviadodato() {
const id = 1;
const condition = true;
const elements = [];
if (condition) {
fetch(`/api/datos/${id}`)
.then(response => response.json())
.then(data => {
elements = data.map(element => Number(element.valores));
// Aquí es donde el array elements
// Está procesado
console.log(elements);
});
} else {
elements.push(0);
}
// Se ejecuta inmediatamente
console.log(elements);
}
Si lo que necesitas es que la función devuelva ese array de elements
, deberás hacer return
de una Promise
que resuelva ese mismo array procesado.
const enviadodato = () =>
new Promise((resolve, reject) => {
// ..
if (condition) {
fetch(`/api/datos/${id}`)
.then(response => response.json())
.then(data => {
elements = data.map(element => Number(element.valores));
// Aquí es donde el array elements
// Está procesado
console.log(elements);
// Resolvemos la Promise con el array
// elements ya procesado
resolve(elements);
})
// Capturamos el error en caso de haber uno
.catch(reject);
} else {
elements.push(0);
// También resolvemos la Promise
// en este caso.
resolve(elements);
}
});
Además, también se puede refactorizar para hacerla async/await
y leerla de forma más simple.
const send = async () => {
// ...
if (condition) {
const response = await fetch(`...`);
const data = await response.json();
elements = data.map(element => Number(element.valores));
} else {
elements.push(0);
}
// Elements ya ha sido procesado
console.log(elements);
return elements;
}
Por último, sólo habría que esperar a la resolución de la promise que devuelve la función enviadodato
.
enviadodato()
.then(elementos => {
// ...
});
Nota
He substituido el código de
datos.forEach(element => {
elementos.push(Number(element.valores))
});
... por el map
porque hace básicamente lo mismo, sólo eso.
Espero que sirva.