Editar: mi primera iteración de esta pregunta se simplificó demasiado, lo que me permitió importar todo el objeto, pero no acceder a ninguna de las propiedades. He actualizado esto para demostrar mi problema con mayor precisión. También agregué el async/awaits real que usaré en el programa real.
También introduje errores en el json para simular los datos propensos a errores que estoy usando, y un bloque de prueba/captura para omitir las iteraciones de error, aunque esto no debería cambiar la funcionalidad que espero.
Quiero importar datos JSON en un módulo de mecanografiado, hacer algunas operaciones, devolver un objeto literal con resultados y luego importar ese objeto literal a otro archivo para realizar más operaciones y referirme a él usando la notación de puntos, sin embargo, solo puedo acceder al objeto después de la importación: cada intento de acceder a las propiedades termina con 'indefinido'
He simplificado al máximo las operaciones para aislar el problema, pero no lo encuentro:
datos JSON:
{ "THINGS":[ { "name":"thing1", "color":"blue" }, { "name":"thing2", "color":"red" }, { "name":"thing3", "color":"orange" }, { "name":"thing4", "color":"purple" }, { "error": "error", "error2": "error" } ] }prueba de importación JSON:
import rawdata from './rawdata.json' assert { type: "json" }; export async function test(){ const data = rawdata.THINGS.map(async(Data)=>{ let name = Data.name; let color = Data.color; let obj = { "name": name, "color": color } return obj }); return(data) }; // pass it to another function and do some stuff to it: async function testImport(){ let d = await test(); let q = d.map((e) => { let p = (d.name + " wuz here") return p }); console.log(q) } testImport(); /* returns: [ 'undefined wuz here', 'undefined wuz here', 'undefined wuz here', 'undefined wuz here', 'undefined wuz here' ] */No puedo creer que esté teniendo tantos problemas con un procedimiento tan simple, así que tengo que preguntar en StackOverflow porque obviamente me he perdido algunos fundamentos cruciales de módulos y objetos.
Esta línea:
const data = rawdata.THINGS.map(async (Data) => {Crea una matriz de objetos de promesa. Para resolver todas las promesas en esa matriz, debe usar:
return Promise.all(data)Ahora la función devuelve una sola promesa que se resuelve en una matriz de objetos, en lugar de una matriz de promesas que cada una se resuelve en un solo objeto.
El segundo problema está aquí:
let d = await test(); let q = d.map((e) => { let p = (d.name + " wuz here") return p }); en la devolución de llamada del map , accede a d.name pero d es la matriz, no el elemento. Eligió asignar cada elemento a e pero no usa esa variable en su función. Si cambia eso a e.name , funciona como espera:
["thing1 wuz here", "thing2 wuz here", "thing3 wuz here", "thing4 wuz here"]Esta es la razón por la que, incluso para el código de ejemplo artificial, los nombres de variables de una sola letra están mal vistos.
Si tu código fuera este:
let items = await test() let mappedItems = items.map(item => { let description = items.name + " wuz here" }) Entonces sería mucho más fácil decir que items.name está accediendo a la propiedad de name en la matriz, lo que no tiene mucho sentido.
Ver ejemplo de trabajo aquí . Simplemente expanda la "consola" en la parte inferior derecha y verá la salida correcta.
Esta línea:
const data = rawdata.THINGS.forEach((Data)=>{ Siempre dejará data como undefined . Esto se debe a que array.forEach() devuelve undefined . Así que no estoy seguro de por qué crees que son valores de retorno.
Probablemente desee usar array.map() que devuelve una nueva matriz llena de los valores devueltos.
export function test() { const data = rawdata.THINGS.map((Data) => { let name = Data.name; let color = Data.color; let info = { name: name, color: color }; return info; }); return data; }Ver este codesandbox para un ejemplo de trabajo: