Import JSON data

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.

Crea una cuenta y continúa aprendiendo 🚀

Import JSON data

Uso de archivos JSON en stores

Eliminación del contenido inicial

Lectura de archivos JSON

Ubicación del archivo

Verificación con consola

Importación exitosa

Asignación de valores al estado

Aplicación a productos

Funcionalidad conservada

Ventajas del desacoplamiento