Crea una cuenta y continúa aprendiendo 🚀

Regístrate o inicia sesión para continuar aprendiendo:

Frontend Aprendiz

Import JSON data

Veamos cómo importar datos JSON sobre nuestros stores correspondientes.

Uso de archivos JSON en stores

Ya tenemos dos archivos JSON con la data de nuestro proyecto.
¿Cómo podemos usar esos dos archivos en nuestros stores correspondientes?

Hay muchas maneras de hacerlo.

Eliminación del contenido inicial

Vamos a empezar eliminando el contenido de los stores.
Aquí en products.ts, vamos a borrar el contenido de este arreglo.
Ahí está. Bien.

Lectura de archivos JSON

¿De qué manera podemos entonces leer la información de los archivos JSON?

Así como nosotros podemos importar funciones, podemos importar clases.
Podemos importar tipos.
También podemos importar data a partir de archivos JSON.

Vamos a usar una directiva import y vamos a importar la data de nuestras categorías desde nuestro archivo categories.json.

Ubicación del archivo

Como este JSON se encuentra ubicado dentro de la carpeta public, tenemos que proporcionar aquí el path adecuado para llegar hasta allí.
En este caso:
Salimos de stores.
Salimos de source.
Nos dirigimos a public, a data y allí tenemos categories.json.

Esta data contiene la data de las categorías.
Podemos llamarlo categoriesData.

Verificación con consola

Hasta aquí, nosotros podemos agregar un console.log para verificar cuál es el contenido de categoriesData para ver si realmente estamos leyendo bien.

Guardamos.
Si actualizamos, vemos que no hay productos porque los hemos eliminado.
Y las categorías están vacías.
Sólo tenemos la categoría que se llama Todas.

Presionamos F12 y aquí en la consola nos encontramos con un arreglo, un array que tiene dos elementos: Oficina y Computadora.

Importación exitosa

Esta información ya no está en el componente.
Sin embargo, está llegando a categories.ts, que es nuestro store.
Desde allí se está mostrando este log.

Esto quiere decir que el import es exitoso.

Asignación de valores al estado

Una vez que tenemos ya la data, podemos asignar ese valor a nuestro estado.
De esta manera, categories tendrá el valor de categoriesData, y estamos definiendo aquí su tipo.

Aplicación a productos

La misma idea vamos a aplicar a nuestro store de productos.

Vamos a agregar un import productsData from, y aquí tenemos que indicar el path.

Para esto ponemos ../ para salir de la carpeta de stores, que es donde estamos ubicados.
Luego nuevamente ../ para salir de la carpeta source.
Luego public, luego data y finalmente products.json.

Entonces, a nuestro estado interno llamado products le vamos a asignar este valor y vamos a seguir definiendo su tipo como un array de Product.

Guardamos.
Actualizamos.
Y nuestra aplicación vuelve a funcionar.

Funcionalidad conservada

Podemos filtrar como ya lo hacíamos.
Podemos ordenar en base al precio, en base al nombre.
Y todo continúa funcionando correctamente.

Ventajas del desacoplamiento

Lo que hemos conseguido es lo mismo que ya teníamos.
Simplemente hemos desacoplado la data de nuestro store.

O sea que nuestros stores de categorías y de productos ya no son responsables por definir aquí la data.
De caso contrario, nos llenaríamos de muchas líneas de código.

Como vemos, ahora nuestro store de productos tiene solo 60 líneas.
Antes, toda esta información de los productos estaba dentro del store y toda esta información de categorías también.

Ahora la data está de manera separada y es más fácil de gestionar.

Si queremos hacer algún cambio, lo hacemos directamente sobre los archivos JSON.
La lógica de los stores se mantiene intacta ante cambios de información.

Esta lección no cuenta con recursos adicionales.

Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.

Ya tenemos dos archivos json con la data de nuestro proyecto. ¿Cómo podemos usar esos dos archivos en nuestros stores correspondientes? Hay muchas maneras de hacerlo. Vamos a empezar eliminando el contenido de los stores, aquí en “products.ts”, vamos a borrar el contenido de este arreglo. Ahí está. Bien. ¿De qué manera podemos entonces leer la información de los archivos json? Así como nosotros podemos importar “funciones”, podemos importar “clases”. podemos importar “tipos”. También podemos importar data a partir de archivos json. Vamos a usar una directiva “import” y vamos a importar la data de nuestras categorías desde nuestro archivo “categories.json”. Como este json se encuentra ubicado dentro de la carpeta “public”, tenemos que proporcionar aquí el path adecuado para llegar hasta allí. En este caso, salimos de “stores”. Salimos de “source”. Nos dirigimos a “public”, a “data” y allí tenemos “categories.json”. Esta data contiene la data de las categorías, podemos llamarlo “categoriesData”. Hasta aquí, nosotros podemos agregar un “console.log” para verificar cuál es el contenido de “categoriesData” para ver si realmente estamos leyendo bien. Vamos a guardar, y si actualizamos vemos que no hay productos porque los hemos eliminado. Y las categorías están vacías. Sólo tenemos la categoría que se llama “Todas”. Vamos a presionar F12 y aquí en la consola nos encontramos con un arreglo, un array que tiene dos elementos: “Oficina” y “Computadora”. Esta información ya no está en el componente. Sin embargo, está llegando a “categories.ts”, que es nuestro store. Desde allí se está mostrando este log. Esto quiere decir que el import es exitoso. Una vez que tenemos ya la data, podemos asignar ese valor a nuestro estado. De esta manera, categories tendrá el valor de “categoriesData”, y estamos definiendo aquí su tipo. La misma idea vamos a aplicar a nuestro store de productos. Vamos a agregar un “import productsData from”, y aquí tenemos que indicar el path. Para esto ponemos “../” para salir de la carpeta de stores, que es donde estamos ubicados. Luego nuevamente “../” para salir de la carpeta “source”. Luego “public”, luego “data” y finalmente “products.json”. Y entonces a nuestro estado interno llamado “products” le vamos a asignar este valor y vamos a seguir definiendo su tipo como un array de “Product”. Guardamos, actualizamos y nuestra aplicación vuelve a funcionar. Podemos filtrar como ya lo hacíamos, podemos ordenar en base al precio, en base al nombre y todo continúa funcionando correctamente. Lo que hemos conseguido es lo mismo que ya teníamos. Simplemente hemos desacoplado la data de nuestro store. O sea que nuestros stores de categorías y de productos ya no son responsables por definir aquí la data. De caso contrario, nos llenaríamos de muchas líneas de código. Como vemos, ahora nuestro store de productos tiene solo 60 líneas. Antes, toda esta información de los productos estaba dentro del store y toda esta información de categorías también. Ahora la data está de manera separada y es más fácil de gestionar. Si queremos hacer algún cambio, lo hacemos directamente sobre los archivos json. La lógica de los stores se mantiene intacta ante cambios de información.

¿Tienes dudas?

Publicar pregunta

¡Comparte conocimiento!

X

Volver al índice

Regístrate

Inicia sesión para llevar un control de tu progreso.

Capítulos











































































































107

Import JSON data

















Espera un momento 🎁 ...

¿Te gustaría aprender a programar, gratis?

Mago de Programación y más

Sólo debes registrarte 😉.