Move data to JSON files

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.

Crea una cuenta y continúa aprendiendo 🚀

Move data to JSON files