Tengo un archivo JSON de ejemplo como el siguiente:
menú.json
{ "0":{ "img":"./101 cup noodles.png" }, "1":{ "img":"./102 cup noodles with beef.png" }, "2":{ "img":"./103 cup noodles with egg.png" }, "3":{ "img":"./104 cup noodles with shrimp.png" } }¿Hay alguna forma de crear declaraciones de importación dinámicamente para cada uno de los enlaces de imagen dentro del archivo JSON para que se construya el paquete web?
Me gustaría evitar tener que escribir una importación individual para cada imagen en la parte superior de mi archivo javascript, especialmente si hay cientos de elementos. P.ej:
menú.js
import img0 from './101 cup noodles.png' import img1 from './102 cup noodles with beef.png' import img2 from './103 cup noodles with egg.png' import img3 from './104 cup noodles with shrimp.png'Intenté hacer declaraciones de importación dinámicamente con campos con nombre y un bucle for, pero aprendí que las declaraciones de importación deben ser de nivel superior, por lo que, lamentablemente, lo siguiente no funcionó:
menú.js
import data from './menu.json' for (let i = 0; i < Object.keys(data).length; i++) { import ['img' + Object.keys(data)[i]] from data[i]['img']; }En este momento, estoy usando el ciclo anterior para registrar en la consola todas mis declaraciones de importación y simplemente copiarlas y pegarlas en la parte superior de mi código, pero eso parece extremadamente poco elegante y me pregunto si hay una mejor manera.
Puede obtener las propiedades del objeto con Object.keys , luego mapear a través de la matriz y construir la cadena.
const obj = { "0":{ "img":"./101 cup noodles.png" }, "1":{ "img":"./102 cup noodles with beef.png" }, "2":{ "img":"./103 cup noodles with egg.png" }, "3":{ "img":"./104 cup noodles with shrimp.png" } } const res = Object.keys(obj).map(e => `import ${Object.keys(obj[e])[0] + e} from '${obj[e].img}'`).join('\n') console.log(res)