0
213
VisualizaçõesCómo acceder a un objeto individual en una matriz usando Javascript
Hola, he exportado usando datos (colección de vendedores ambulantes ) usando getDocs() de Firebase.
Después de eso, puse los datos de cada vendedor ambulante como un objeto en una matriz llamada allStall , como se muestra en la captura de pantalla del registro de la consola a continuación.
Pregunta 1: ¿Cómo accedo a cada objeto individual en mi matriz allStall ? Intento usar .map() para acceder a cada uno de ellos, pero no obtengo nada.
Tenga en cuenta que ya tengo datos dentro de mi matriz allStall , vea la captura de pantalla anterior. [Actualizar] el mapa no funciona en el código a continuación porque el campo es el nombre de la parada y no el nombre de la parada. Sin embargo, debe ser asíncrono + esperar si usa/llama/desde otra función.
Pregunta 2: ¿Por qué hay [[Prototype]]: Array(0) en mi matriz allStall?
export /*Soln add async*/function getAllStall(){ var allStall = []; try { /*Soln add await */getDocs(collection(db, "hawkers")).then((querySnapshot) => { querySnapshot.forEach((doc) => { var stall = doc.data(); var name = stall.stallname; var category = stall.category; var description = stall.description; var stallData = { stallName:name, stallCategory:category, stallDescription:description }; allStall.push(stallData); });}); console.log(allStall); //Unable to access individual object in Array of objects allStall.map(stall =>{console.log(stall.stallName);});} catch (e) {console.error("Error get all document: ", e);} return allStall; }En mi archivo js principal, hice lo siguiente:
useEffect(/*Soln add await*/() => { getAllStall(); /*Soln:replace the statement above with the code below const allStall = await getAllStall(); allStall.map((stall)=>console.log(stall.stallname)); */ } );2 Respostas
Responde à pergunta0
No obtiene nada porque allStall está vacío ya que no está esperando que se cumpla la promesa
prueba esto
export const getAllStall = () => getDocs(collection(db, "hawkers")) .then((querySnapshot) => querySnapshot.map((doc) => { const {stallName, category, description} = doc.data(); return { stallName:name, stallCategory:category, stallDescription:description }; }); )intenta cambiar el efecto de uso como este
useEffect(async () => { const allStats = await getAllStall(); console.log(allStats) allStats.forEach(console.log) } );0
¡Muchas gracias a R4ncid, has sido una inspiración! ¡Y gracias a todos los que comentaron abajo!
Logré hacerlo con async y await. Última actualización, también descubrí qué está mal con mi código anterior. Comenté la solución en mi pregunta, que es agregar el asíncrono a la función y esperar a getDocs.
Además, el mapa no funciona en el código anterior porque el campo es nombre de puesto, no nombre de puesto. Sin embargo, debe ser asíncrono + esperar si se usa/llama desde otra función.
función auxiliar
export async function getAllStall(){ const querySnapshot = await getDocs(collection(db, "hawkers")); var allStall = []; querySnapshot.forEach(doc => { var stall = doc.data(); var name = stall.stallname; var category = stall.category; var description = stall.description; var stallData = { stallName:name, stallCategory:category, stallDescription:description }; allStall.push(stall); } ); return allStall; }Archivo JS principal
useEffect(async () => { const allStall = await getAllStall(); allStall.map((stall)=>console.log(stall.stallname)); } ); Viva 