Leer fichero JSON con Angular

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

  [
    {
        "id": 7,
        "email": "[email protected]",
        "first_name": "Michael",
        "last_name": "Lawson",
        "avatar": "https://reqres.in/img/faces/7-image.jpg"
    },
    {
        "id": 8,
        "email": "[email protected]",
        "first_name": "Lindsay",
        "last_name": "Ferguson",
        "avatar": "https://reqres.in/img/faces/8-image.jpg"
    },
    {
        "id": 9,
        "email": "[email protected]",
        "first_name": "Tobias",
        "last_name": "Funke",
        "avatar": "https://reqres.in/img/faces/9-image.jpg"
    },
    {
        "id": 10,
        "email": "[email protected]",
        "first_name": "Byron",
        "last_name": "Fields",
        "avatar": "https://reqres.in/img/faces/10-image.jpg"
    },
    {
        "id": 11,
        "email": "[email protected]",
        "first_name": "George",
        "last_name": "Edwards",
        "avatar": "https://reqres.in/img/faces/11-image.jpg"
    },
    {
        "id": 12,
        "email": "[email protected]",
        "first_name": "Rachel",
        "last_name": "Howell",
        "avatar": "https://reqres.in/img/faces/12-image.jpg"
    }
  ]

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

  "compilerOptions": {
    "resolveJsonModule": true,
    "baseUrl": "./",
    ...

Si usas una versión de Angular 12 o superior, es posible que también necesites añadir al tsconfig.json la opción de:

"allowSyntheticDefaultImports": true

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

import data from '../assets/users.json';

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

console.log(data);

Usando el HttpClientModule de Angular

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

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { HttpClientModule } from '@angular/common/http';

  import { AppComponent } from './app.component';


  @NgModule({
    declarations: [
      AppComponent,
      HomeComponent,
      AboutComponent
    ],
    imports: [
      BrowserModule,
      HttpClientModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }

En el fichero app.component.ts:

Importamos el HttpClient
Añadimos un HTML básico. Como ves yo he añadido un h1 y dos botones
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.

  import { HttpClient } from '@angular/common/http';
  import { Component } from '@angular/core';
  import * as data from '../assets/users.json';

  @Component({
    selector: 'app-root',
    template: '
    <h1>Ejemplo de leer un JSON con Angular 11</h1>
    <button (click)="firstWay()">Con TypeScript e <i>import Statement</i></button>
    <br>
    <br>
    <button (click)="secondWay()">Con el <i>HttpClient</i></button>
    '
      ,
    styleUrls: ['./app.component.css'],
  })
  export class AppComponent {
    
    title = 'readJson';

    public contentfile:string='';

    constructor(private httpClient: HttpClient) {}

    ngOnInit(): void {
      
    }

    public firstWay():void{
      console.log(data);    
    }

    public secondWay():void{
      this.httpClient.get("assets/users.json").subscribe(data =>{
        console.log(data);      
      })
    }
  }

Puedes clonar el repositorio de mi GitHub.

Hasta luego 🖖