Leer archivos JSON desde Angular 10

Hola,

Hay veces que necesitamos leer un archivo JSON para leer datos o un archivo de configuración. Para hacer esto tenemos que hacer lo siguiente:

Imaginemos que tenemos el siguiente JSON:

{
    "Menu": [
      {
        "id": "b1",
        "name": "Café americano",
        "price": 5,
        "count": 1,
        "type": "breakfast",
        "subType": "",
        "image": "/assets/images/coffee.png"
      },
      {
        "id": "b2",
        "name": "Café con leche",
        "price": 7,
        "count": 1,
        "type": "breakfast",
        "subType": "",
        "image": "/assets/images/latte.png"
      }
    ]
}

Lo único que tenemos que añadir es la siguiente función en tu componente o servicio

import * as data from '../../assets/menu.json'; //aqui es la ruta donde importas el archivo json
...
...
...
  getJsonContent()
    return (data as any); // aqui obtenemos el JSON completo
  }

  getMenuJsonContent()
    return (data as any).Menu; // aqui obtenemos el array de elementos de la propiedad Menu
  }

Mapeando el contenido a un array de clases

Si necesitamos mapear los datos del archivo JSON a una clase de nuestro modelo, podemos hacer lo siguiente:

Creamos una clase con la misma estructura que tiene el JSON que queremos mapear:

export interface Product {
    id: string;
    name: string;
    price: number;
    count: number;
    type: string;
    subType: string;
    image: string
}

Añadimos una función getProducts(): Observable<Array<Product>> donde indicamos que retornará un Array de Product (IMPORTANTE: Para que funcione, el array debe tener la misma estructura que la clase Product)

import { Observable } from 'rxjs';
import * as data from '../../assets/menu.json';
import { Product } from '../models/product';
...
...
...
 getProducts(): Observable<Array<Product>> {
    return (data as any).Menu;
  }

Y con esto ya tenemos un array de Products desde el JSON. Como ven, ya se puede leer un archivo JSON desde Angular 10, espero les sirva, hasta la próxima :)

Blog

Leer archivos JSON desde Angular 10

Sandy Marmolejo

Mapeando el contenido a un array de clases

Join Our Newsletter. No Spam, Only the good stuff.

Related