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 :)
Latest comments (0)