Leer ficheros locales JSON con Angular 11

Te mostraré cómo leer ficheros JSON de tu dispositivo usando el HttpClient de Angular y el import statement junto con TypeScript.

Asumo que la versión de tu TypeScript es superior a la 2.9, ya que el ejemplo lo haré para Angular 11


Antes de comenzar, crea un fichero que se llame users.json y ubícalo en la carpeta src/assets de tu proyecto de Angular.

Puedes incluir los datos que quieras, yo obtengo los datos para crear ficheros JSON de reqres.in.


A continuación, te dejo el contenido del fichero json que he utilizado en mi ejemplo de GitHub

Usando TypeScript y el import statement

Lo primero será añadir al tsconfig.json la opción llamada resolveJsonModule y la estableceremos a true en el bloque de los compilerOptions. Con ello Angular no nos marcará como error la importación de archivos json


En el app.component.ts importar el archivo de ejemplo

Añadir el método llamado firstWay() en el ejemplo y ahí mostrará por consola el fichero

Usando el HttpClientModule de Angular

Lo primero que hay que hacer es importar el HttpClientModule en el src/app/app.module.ts

En el fichero app.component.ts:

  1. Importamos el HttpClient
  2. Añadimos un HTML básico. Como ves yo he añadido un h1 y dos botones
  3. Añadimos el método llamado secondWay(). Este método lo que hará será subscribirse a un get del fichero JSON a leer y lo devolverá como respuesta de dicha subscripción.

Puedes clonar el repositorio de mi GitHub.


Saludos,

Servicios

Software

IoT

Digitalización

Aplicaciones móviles

Consultoría