No puedo acceder a los objetos específicos dentro de la matriz. Empujé los datos a la matriz desde una API. Cuando introduzco la consola en los países Arr, muestra la gama completa de objetos con todas sus propiedades, pero cuando trato de acceder al objeto específico en un índice específico, me quedo sin definir. Además, ¿debería devolver una matriz pero el tipo de muestra que es un objeto? ¿Alguien puede ayudar?
const countriesURL = 'https://restcountries.eu/rest/v2/all'; let countriesArr = []; async function getCountriesData() { const response = await fetch(countriesURL); const data = await response.json(); showCountries(data); } function showCountries(countries) { countries.forEach((country) => { countriesArr.push(country) })} console.log(countriesArr) //this shows array of objects console.log(countriesArr[0]) //this shows undefined????const countriesURL = 'https://restcountries.eu/rest/v2/all'; let countriesArr = []; async function getCountriesData() { const response = await fetch(countriesURL); const data = await response.json(); showCountries(data); } function showCountries(countries) { countries.forEach((country) => { countriesArr.push(country) })} getCountriesData(); console.log(countriesArr) //this shows array of objects console.log(countriesArr[0]) //this shows undefined????JavaScript tiene un solo subproceso, ya sea que se esté ejecutando en su navegador o en NodeJS. Entonces, cuando el navegador procese su código, procesará de arriba hacia abajo y evaluará las variables en el archivo de inicio y procederá a colocar todas las funciones en la pila de llamadas.
Cuando el motor del navegador se encuentra con una función asíncrona, toma una referencia a esa función y la coloca en una cola de devolución de llamada, y si es una promesa (que es asíncrona ya que es solo un contenedor de promesas), se pone en un " cola de trabajos"/"cola de microtareas". Una vez que la función asíncrona emite un evento completo, el motor del navegador toma esos datos y empuja esa función junto con su referencia en la pila de llamadas para que se ejecute después de que se completen todas las tareas/funciones actuales en la pila. La referencia de la función contiene el número de línea para que el motor sepa dónde evaluar la función.
Entonces, sabiendo esto, cuando llega a getCountriesData(), esta función asincrónica se saca del hilo principal y se coloca en una cola separada que contiene hilos dedicados a tareas relacionadas con la red, y la ejecución del programa procesa y evalúa inmediatamente los siguientes registros de la consola antes del getCountriesData() termina de ejecutarse.
La única forma de asegurarse de que está insertando/manipulando correctamente los datos que recibió de getCountriesData() en los países Arr es si está realizando todas las tareas relacionadas con los datos dentro de esa función O en luego() procediendo.
su principal problema es la obtención asíncrona de datos, por lo que realiza una solicitud al servidor y, mientras lo hace, su próximo código se está completando
getCountriesData() is loading... showCountries(countries) complete! console.log(countriesArr) complete! console.log(countriesArr[0]) complete!En este caso, la matriz de países está vacía y cuando toma el elemento [0] que no existe, JS devuelve 'indefinido'.
Intente usar Promise API para evitar esto:
const countriesURL = 'https://restcountries.eu/rest/v2/all'; let countriesArr = []; async function getCountriesData() { const response = await fetch(countriesURL); const data = await response.json(); showCountries(data); } function showCountries(countries) { countries.forEach((country) => { countriesArr.push(country) }) } /* this function return special type Promise */ getCountriesData().then(res => { console.log(countriesArr) console.log(countriesArr[0]) })Prueba así:
const countriesURL = 'https://restcountries.eu/rest/v2/all'; let countriesArr = []; async function getCountriesData() { const loading = document.createElement("P"); loading.innerText = 'Loading ...' document.body.appendChild(loading); await fetch(countriesURL) .then(response => response.json()) .then(data => countriesArr = data) loading.remove(); console.log(countriesArr) console.log(countriesArr[0]) } getCountriesData()