Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Crea una cuenta y continúa aprendiendo 🚀
Regístrate o inicia sesión para continuar aprendiendo:
Frontend
Aprendiz
Move data to JSON files
Empecemos creando una carpeta data, y definiendo allí 2 archivos JSON con los datos de nuestras categorías y productos.
Separación de datos en archivos JSON
Tal como hemos comentado en la lección anterior, vamos a separar nuestra lista de productos a un archivo aparte y de igual manera nuestra lista de categorías.
Creación de la carpeta data
Dentro de la carpeta public vamos a crear una carpeta nueva llamada data.
Aquí vamos a poner los datos de nuestra aplicación.
Actualmente, en public solo tenemos imágenes de productos dentro de una carpeta.
Por eso hemos creado una nueva carpeta que se llama data.
Archivos categories.json y products.json
Vamos a crear un archivo llamado categories.json.
También vamos a crear otro archivo llamado products.json.
-
categories.jsonva a contener un arreglo. -
products.jsonva a contener un arreglo de productos.
Validación de sintaxis JSON
Nótese que luego de pegar nos encontramos con errores.
Esto de aquí es una sintaxis válida para declarar un arreglo de objetos en JavaScript.
Pero si pasamos a hablar de json, ya no de código JavaScript, un JSON necesita tener cierto formato.
La convención nos dice que un archivo JSON debe respetar cierto formato.
Por ejemplo: las keys deben estar encerradas entre comillas dobles.
- Entonces vamos a poner
iddentro de comillas dobles. - Haremos lo mismo con
nameydescription.
Para la segunda categoría también.
Entonces tenemos id, name y description.
Reemplazo de comillas
Lo siguiente es reemplazar las comillas simples por comillas dobles.
- Con
Ctrl+Dpuedo hacer una selección múltiple de valores que coinciden. - De esta manera tenemos un JSON válido.
Guardamos y procedemos a hacer lo mismo con nuestro archivo products.json.
- Con
Ctrl+D, vamos a seleccionar todas las coincidencias. - Presionamos la flecha izquierda en el teclado.
-
Ctrlmás tecla izquierda. - Luego presionamos
Shift+2para poner una comilla doble.
De esta manera consigo aplicar una comilla doble para todos los atributos.
Selecciono una comilla simple.
Presiono Ctrl+D múltiples veces.
Luego de seleccionar todos los casos, presiono Shift+2 para imprimir una comilla doble.
Terminamos reemplazando la comilla simple.
Ya no hay errores. Tenemos dos archivos JSON válidos.
Formato del archivo JSON
Un archivo JSON no necesita espacios ni saltos de línea.
Esto podría escribirse todo en una línea.
Sin embargo, como vamos a estar modificando los datos, vamos a dejarlo con cierto formato.
Podemos quitarle la tabulación a esta data para que el formato sea similar a lo que tenemos acá:
- Corchetes, llaves, coma, llaves y cierre de corchetes.
- Corchetes, llaves, coma, llaves.
Hemos eliminado algunos saltos de línea, pero sigue siendo un formato JSON válido.
Ventajas de separar los datos
¿Por qué hacemos esto?
Supongamos que en el futuro queremos introducir más productos o categorías.
Simplemente modificamos los datos en el archivo JSON correspondiente.
No tenemos que ir a un archivo de vue que contenga lógica de aplicación.
Minimizamos los riesgos.
Minimizamos la posibilidad de errores.
Cuando hagamos un commit nuevo, usamos git status y nos aseguramos de que solo hay cambios en los archivos JSON.
Por ejemplo, vamos a crear un commit nuevo llamado:
Add data folder with json files
(Agregar carpeta data como archivos JSON)
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
Tal como hemos comentado en la lección anterior, vamos a separar nuestra lista de productos a un archivo aparte y de igual manera nuestra lista de categorías. Para ello, dentro de la carpeta “public” vamos a crear una carpeta nueva que se va a llamar “data”. Aquí vamos a poner los datos de nuestra aplicación. Actualmente en “public” solo tenemos imágenes de productos dentro de una carpeta, por eso hemos creado una nueva carpeta que se llama “data”. Y aquí vamos a crear un archivo que se va a llamar “categories.json”. Siguiendo en la misma idea, vamos a crear otro archivo llamado “products.json”. ¿Qué es lo que va a contener “categories.json”? Va a contener un arreglo. ¿Qué es lo que va a contener “products.json”? Va a contener un arreglo de productos. Nótese que luego de pegar nos encontramos con errores. Esto de aquí es una sintaxis válida para declarar un arreglo de objetos en JavaScript. Pero si pasamos a hablar de “json”, ya no de código JavaScript, un json necesita tener cierto formato. La convención nos dice que un archivo json debe respetar cierto formato. Aquí, por ejemplo, nos dice que las “keys” deben estar encerradas entre comillas dobles. Entonces vamos a poner “id” dentro de comillas dobles. Haremos lo mismo con “name” y lo mismo con “description”. Para la segunda categoría también. Entonces tenemos “id”, “name” y “description”. Lo siguiente es reemplazar estas comillas simples por comillas dobles. Con Ctrl+D puedo hacer una selección múltiple de valores que coinciden. De esta manera tenemos un json válido. Vamos a guardar y vamos a proceder a hacer lo mismo con nuestro archivo de “products.json”. Con Ctrl+D, vamos a seleccionar todas las coincidencias. Yo presionaré la flecha de la izquierda en el teclado. Ctrl más tecla izquierda y luego presionaré Shift+2 en mi teclado para poner una comilla doble. De esta manera consigo rápidamente aplicar una comilla doble para todos los atributos. Lo siguiente que haré es reemplazar la comilla simple. Selecciono una comilla simple, presiono Crtl+D múltiples veces y luego de seleccionar todos los casos, voy a presionar Shift+2 en los números que tengo en la parte de arriba del teclado para imprimir una comilla doble, y terminar reemplazándo la comilla simple. Ya no hay ningún error porque estamos con dos archivos json válidos. En realidad, un archivo json no necesita de espacios ni de saltos de línea, O sea que esto podría fácilmente escribirse así. Sin embargo, como nosotros vamos a estar modificando los datos, vamos a dejarlo con cierto formato. Bien, aquí lo que podemos hacer es quitarle la tabulación a esta data para que el formato sea similar a lo que tenemos acá. Corchetes, llaves, coma, llaves y cierre corchetes. Corchetes, llaves coma, llaves. Podemos hacer esto de esta manera. Bien, hemos eliminado algunos saltos de línea, pero sigue siendo un formato json válido. ¿Por qué hacemos esto? Supongamos que en el futuro queremos introducir más productos o más categorías. Pues simplemente tenemos que venir al archivo json correspondiente en nuestra carpeta data y modificar los datos. No tenemos que ir a un archivo de “vue” que contenga lógica de aplicación. Entonces minimizamos los riesgos, minimizamos la posibilidad de errores, de tal manera que cuando nosotros vayamos a hacer un “commit” nuevo, nosotros podamos usar “git status” y podamos asegurarnos de que sólo hay cambios en los archivos json. En este caso, por ejemplo, voy a crear un “commit” nuevo llamado “Add data folder with json files”, agregar carpeta data como archivos json.
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript