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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
[ { "id":"1", "nombre":"Torta de Chocolate", "stock":"35", "precio":"5.00", "url":"torta-de-chocolate", "img":"tc.jpg", "fecha":"2019-06-17 15:56:23" }, { "id":"2", "nombre":"Pie de Manzana", "stock":"45", "precio":"4.50", "url":"pie-de-manzana", "img":"pm.jpg", "fecha":"2018-08-11 16:25:33" }, { "id":"3", "nombre":"Arroz con Leche", "stock":"36", "precio":"2.50", "url":"arroz-con-leche", "img":"al.jpg", "fecha":"2018-08-11 16:25:36" }, { "id":"4", "nombre":"Gelatina de Fresa", "stock":"60", "precio":"1.50", "url":"gelatina-de-fresa", "img":"gf.jpg", "fecha":"2018-08-11 16:25:39" }, { "id":"5", "nombre":"Suspiro a la Limeña", "stock":"26", "precio":"6.00", "url":"suspiro-a-la-limeña", "img":"sl.jpg", "fecha":"2019-06-17 15:58:43" }, { "id":"6", "nombre":"Mazamorra Morada", "stock":"50", "precio":"3.00", "url":"mazamorra-morada", "img":"mm.png", "fecha":"2018-08-11 16:25:45" } ] |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
ng new json-angular CREATE json-angular/angular.json (3641 bytes) CREATE json-angular/package.json (1286 bytes) CREATE json-angular/README.md (1028 bytes) CREATE json-angular/tsconfig.json (543 bytes) CREATE json-angular/tslint.json (1988 bytes) CREATE json-angular/.editorconfig (246 bytes) CREATE json-angular/.gitignore (631 bytes) CREATE json-angular/browserslist (429 bytes) CREATE json-angular/karma.conf.js (1024 bytes) CREATE json-angular/tsconfig.app.json (270 bytes) CREATE json-angular/tsconfig.spec.json (270 bytes) CREATE json-angular/src/favicon.ico (948 bytes) CREATE json-angular/src/index.html (297 bytes) ... ... (Continua la instalación) ... added 1186 packages from 1050 contributors and audited 18848 packages in 197.568s found 0 vulnerabilities |
Luego de crear el nuevo proyecto se ha creado un conjunto de archivos y directorios útiles para el correcto funcionamiento de mi proyecto
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
/json-angular ├── /e2e ├── /node_modules ├── /src ├── /app ├── app.component.css ├── app.component.html ├── app.component.spec.ts ├── app.component.ts ├── app.module.ts ├── /assets ├── .gitkeep ├── /environments ├── environments.prod.ts ├── environments.ts ├── favicon.ico ├── index.html ├── main.ts ├── polyfills.ts ├── styles.css ├── test.ts ├── .editorconfig ├── .gitignore ├── angular.json ├── browserslist ├── karma.conf.js ├── package-lock.json ├── package.json ├── README.md ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json ├── tslint.json |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
/json-angular ├── /e2e ├── /node_modules ├── /src ├── /app ├── app.component.css ├── app.component.html ├── app.component.spec.ts ├── app.component.ts ├── app.module.ts ├── /assets ├── /json ├── postres.json // Este Archivo JSON ├── .gitkeep ├── /environments ├── environments.prod.ts ├── environments.ts ├── favicon.ico ├── index.html ├── main.ts ├── polyfills.ts ├── styles.css ├── test.ts ├── .editorconfig ├── .gitignore ├── angular.json ├── browserslist ├── karma.conf.js ├── package-lock.json ├── package.json ├── README.md ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json ├── tslint.json |
Ahora abro el archivo llamado app.component.ts, este archivo se encuentra en src > app > app.componente.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
/json-angular ├── /e2e ├── /node_modules ├── /src ├── /app ├── app.component.css ├── app.component.html ├── app.component.spec.ts ├── app.component.ts // Abro este Archivo ├── app.module.ts ├── /assets ├── /json ├── postres.json ├── .gitkeep ├── /environments ├── environments.prod.ts ├── environments.ts ├── favicon.ico ├── index.html ├── main.ts ├── polyfills.ts ├── styles.css ├── test.ts ├── .editorconfig ├── .gitignore ├── angular.json ├── browserslist ├── karma.conf.js ├── package-lock.json ├── package.json ├── README.md ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json ├── tslint.json |
En el archivo app.componente.ts agrego lo siguiente
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import { Component } from '@angular/core'; // Importo el archivo JSON import listadePostres from 'src/assets/json/postres.json'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { // Exporto los datos del archivo JSON a la vista Postres: any = listadePostres; } |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
/json-angular ├── /e2e ├── /node_modules ├── /src ├── /app ├── app.component.css ├── app.component.html ├── app.component.spec.ts ├── app.component.ts ├── app.module.ts ├── /assets ├── /json ├── postres.json ├── .gitkeep ├── /environments ├── environments.prod.ts ├── environments.ts ├── favicon.ico ├── index.html ├── json.d.ts // Creo este Archivo ├── main.ts ├── polyfills.ts ├── styles.css ├── test.ts ├── .editorconfig ├── .gitignore ├── angular.json ├── browserslist ├── karma.conf.js ├── package-lock.json ├── package.json ├── README.md ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json ├── tslint.json |
Y dentro del archivo json.d.ts agrego lo siguiente
|
1 2 3 4 5 6 |
declare module "*.json" { const value: any; export default value; } |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
/json-angular ├── /e2e ├── /node_modules ├── /src ├── /app ├── app.component.css ├── app.component.html // Abro este Archivo ├── app.component.spec.ts ├── app.component.ts ├── app.module.ts ├── /assets ├── /json ├── postres.json ├── .gitkeep ├── /environments ├── environments.prod.ts ├── environments.ts ├── favicon.ico ├── index.html ├── main.ts ├── polyfills.ts ├── styles.css ├── test.ts ├── .editorconfig ├── .gitignore ├── angular.json ├── browserslist ├── json.ts ├── karma.conf.js ├── package-lock.json ├── package.json ├── README.md ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json ├── tslint.json |
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
|
1 2 3 4 5 6 7 |
<ul> <li *ngFor="let postre of Postres"> {{postre.nombre}} </li> </ul> |
Si arranco el servidor de Angular con el siguiente comando
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
ng serve i ｢wds｣: Project is running at https://localhost:4200/webpack-dev-server/ i ｢wds｣: webpack output is served from / i ｢wds｣: 404s will fallback to //index.html chunk {main} main.js, main.js.map (main) 23.4 kB [initial] [rendered] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 264 kB [initial] [rendered] chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered] chunk {styles} styles.js, styles.js.map (styles) 9.72 kB [initial] [rendered] chunk {vendor} vendor.js, vendor.js.map (vendor) 3.81 MB [initial] [rendered] Date: 2019-10-02T07:46:13.290Z - Hash: dbca6c458d59d2bc7605 - Time: 6504ms ** Angular Live Development Server is listening on localhost:4200, open your browser on https://localhost:4200/ ** i ｢wdm｣: Compiled successfully. |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<table class="table"> <thead class="thead-dark"> <tr> <th scope="col">ID</th> <th scope="col">Nombre</th> <th scope="col">Stock</th> <th scope="col">Precio</th> <th scope="col">URL Amigable</th> <th scope="col">Imagen</th> <th scope="col">Fecha</th> </tr> </thead> <tbody> <tr *ngFor="let postre of Postres"> <th scope="row">{{postre.id}}</th> <td>{{postre.nombre}}</td> <td>{{postre.stock}}</td> <td>{{postre.precio}}</td> <td>{{postre.url}}</td> <td> <img src="assets/img/{{postre.img}}" width="30px" class="img-fluid" alt="{{postre.nombre}}"> </td> <td>{{postre.fecha}}</td> </tr> </tbody> </table> |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
/json-angular ├── /e2e ├── /node_modules ├── /src ├── /app ├── app.component.css ├── app.component.html ├── app.component.spec.ts ├── app.component.ts ├── app.module.ts ├── /assets ├── /img // Directorio con las imágenes ├── al.jpg ├── gf.jpg ├── mm.png ├── pm.jpg ├── sl.jpg ├── tc.jpg ├── /json ├── postres.json ├── .gitkeep ├── /environments ├── environments.prod.ts ├── environments.ts ├── favicon.ico ├── index.html ├── json.d.ts ├── main.ts ├── polyfills.ts ├── styles.css ├── test.ts ├── .editorconfig ├── .gitignore ├── angular.json ├── browserslist ├── karma.conf.js ├── package-lock.json ├── package.json ├── README.md ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json ├── tslint.json |
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
- Angular Tutoriales
- 02-10-2019
- 05-10-2019
- Crear un Post - Eventos Devs - Foro
Seguimos trabajando las 24 horas del día para brindarte la mejor experiencia en la comunidad.
Hemos corregido el problema y ahora la web no muestra esa barra horizontal y se ve en su tamaño natural.
Seguimos trabajando las 24 horas del día, para mejorar la comunidad.
Seguimos trabajando las 24 horas y 365 días del año para mejorar tu experiencia en la comunidad.
Seguimos trabajando para brindarte le mejor experiencia en Nube Colectiva.
