Icono del sitio Blog de Programación y Desarrollo – Nube Colectiva

Como Leer un archivo JSON con Vue JS 2.6.11 + Tabla de Bootstrap 4

Demo Github

Vue JS junto con React JS y Angular son los mejores Frameworks creados sobre JavaScript, bueno hasta la fecha de este Post aún lo son, pero no sabemos que nos deparará el futuro, estos frameworks se usan para el desarrollo de interfaces Frontend, en nuestro Blog ya teníamos un Post para leer datos JSON con React JS llamado Como mostrar Datos mediante Hooks con React JS 16.12 y en Angular el Post Como Leer un archivo JSON con Angular 8 + Tabla de Bootstrap 4, pero aún no teníamos uno con Vue JS, y en este Post veremos como hacerlo.

Si no has escuchado sobre Vue JS, te invito a leer los siguientes artículos para que te familiarices con esta herramienta:

Y también te invito a escuchar el Podcast: “Razones Por Las Cuales Te Cuesta Aprender A Programar”:

Spotify: Sound Cloud:

Bien ahora continuemos con el Post: Como Leer un archivo JSON con Vue JS 2.6.11 + Tabla de Bootstrap 4. 

Lo primero que haré es crear un nuevo proyecto mediante Vue CLI y luego ingreso al directorio que Vue JS me ha creado para el proyecto.

Componente Datos

En el directorio leer_json_vuejs2611_bootstrap4 se me ha creado un conjunto de directorios y archivos indispensables para mi aplicación, creo un nuevo componente llamado Datos.vue, este componente lo creo dentro de src > components > Datos.vue


Después de crear el archivo Datos.vue lo abro y comenzaré creando una tabla HTML dentro de <template></template>, en esta tabla listaré los datos del archivo JSON, esta tabla contiene clases de Bootstrap 4.


Puedes ver que en la tabla dentro del elemento <tbody></tbody> hago uso de la directiva v-for para listar los datos del archivo JSON.


Paso seguido dentro de las etiquetas <script></script> importo el archivo JSON en donde tengo datos de postres, a este archivo le puse de nombre postres.json (Mas abajo compartiré el contenido del archivo)


Luego creo un método llamado items y en el hago uso del método map() de JavaScript para obtener los datos.


Eso es todo, ya casi tenemos listo nuestra aplicación.

Componente Principal (App)

Ahora abriré el archivo App.vue el cual se encuentra en leer_json_vuejs2611_bootstrap4 > src > App.vue


En el archivo App.vue muestro o imprimo el componente Datos dentro de <template></template> y dentro de las etiquetas <script></script> hago la importación del componente Datos.


Si voy al navegador, debería de ver los datos listados en una tabla HTML (Bootstrap 4).

Archivo JSON e Imágenes

El contenido del archivo postres.json lo colocaré en el repositorio GitHub, pero lo comparto igualmente a continuación.


El archivo postres.json lo he colocado en leer_json_vuejs2611_bootstrap4 > src > assets > json > postres.json


Para este tutoria, estoy usando 6 imágenes, estas imágenes las he colocado en leer_json_vuejs2611_bootstrap4 > public > img


Las imágenes se deben colocar en el directorio public para que puedan cargar.

Eso es todo, al inicio de este tutorial he colocado una Demo un repositorio GitHub con el código de este proyecto.

Conclusión

En este tutorial hemos aprendido a leer un archivo JSON puramente con Vue JS, hay otras maneras de hacerlo, esta es una opción y espero que te sirva de mucho.

Nota

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos. 

Salir de la versión móvil