Como Leer un archivo JSON con Angular 8 + Tabla de Bootstrap 4

6 minuto(s)

En esta página:

Demo Github

El manejo de Datos en una aplicación es muy importante, una aplicación que no cuente con Datos no tiene sentido, JSON es uno de los formatos más usados en el Desarrollo de aplicaciones Desktop, Móviles, etc. y en Angular no hay excepción, una tarea muy importante es el listado o la lecturas de datos en este formato, en este tutorial te enseñare como hacerlo, con la versión 8 de Angular, especifica mente con la  versión 8.2.8 que es la versión actual cuando hice este Post, vamos con este Tutorial.

Voy a usar un archivo local JSON llamado postres.json el cual contiene 6 filas de datos, cada fila esta compuesta por 7 datos que son id, nombre, stock, precio, url, img y fecha


Si deseas conocer más sobre los tipos de datos que hay en JSON, puedes leer el artículo Tipos de Datos que podemos usar en JSON para que estés más familiarizado este formato de datos.

Me ubico en un directorio de mi PC y abro mi consola de comandos en la cual tengo integrado Angular CLI, te recomiendo leer el artículo Como Instalar la Interfaz de Comandos Angular CLI y ejecuto el siguiente comando para crear un nuevo proyecto


Luego de crear el nuevo proyecto se ha creado un conjunto de archivos y directorios útiles para el correcto funcionamiento de mi proyecto


Mi archivo postres.json lo voy a colocar dentro del directorio assets, dentro de este directorio creo un nuevo directorio llamado json y dentro de este colocaré el archivo postres.json


Ahora abro el archivo llamado app.component.ts, este archivo se encuentra en src > app > app.componente.ts


En el archivo app.componente.ts agrego lo siguiente


Para que la vista pueda recibir los datos del archivo postres.json voy a Crear un nuevo archivo con el nombre json.d.ts en el directorio principal del proyecto, es decir en src > json.d.ts


Y dentro del archivo json.d.ts agrego lo siguiente


Lo que hago es crear un módulo llamado *.json con la constante any, este any lo he usado en mi archivo o componente app.componente.ts con esto mi interface ya esta lista para leer el archivo JSON

Ahora abro el archivo app.component.html que se encuentra en src > app > app.component.html


Dentr del archivo app.component.html crearé una lista con en donde mostrare los nombres de los Postres que se encuentran en el archivo postres.json haciendo uso de la directiva ngFor de Angular


Si arranco el servidor de Angular con el siguiente comando


Abro la url del servidor local https://localhost:4200 y se listan los nombres de los postres que están en el archivo JSON postres.json

Bien eso es genial, pero en el archivo JSON tenemos más datos que mostrar, para esto usaré una tabla HTML de Bootstrap 4 y darle un aspecto más profesional, en mi archivo app.component.html agrego la tabla con el resto de datos del archivo postres.json


Abro mi servidor local en el navegador https://localhost:4200/ y aparece listado los demás datos del archivo postres.json en una tabla HTML de Bootstrap 4

Te recomiendo leer el articulo Que es Bootstrap, Historia y tu Primer Hola Mundo si es que no sabes sobre Bootstrap, si ya lo conoces no hay problema.

Las imágenes de la columna Imagen las tengo en el directorio assets > img


Eso es todo, al inicio de este Tutorial he colocado una Demo y el repositorio GitHub con el código para que lo puedas usar en tus proyectos.

Nota

  • Los pasos mencionados en este Tutorial pueden ser modificados en un futuro, esto no depende de nosotros si no de los Desarrolladores que dan soporte a Angular.

 

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