Leer fichero json local con Angular
Un ejemplo de como se puede acceder a un fichero *.json ubicado en local con Angular (probado con angular 10) es el siguiente:
//Contenido del fichero data.json { "titleSite" : "Dynamic Angular Gallery", "descriptionSite" : "Galeria dinámica en angular 10+" }
import { Injectable } from '@angular/core'; import webData from '../../../_files/data.json'; /** * Servicio que realiza el acceso a la información del data.json. */ @Injectable({ providedIn: 'root' }) export class JsonDataService { /** * Objeto en el que se va a volcar la información del fichero data.json. */ public info:{ titleSite:string, descriptionSite:string, } = this.getInfoJson(); /** * Método que devuelve el contenido del fichero data.json * @returns - data.json */ public getInfoJson(){ return webData; } }
Por defecto, Angular no lee el archivo JSON. Así que debemos crear un archivo llamado ‘json-typings.d.ts’ dentro de la carpeta de la aplicación del proyecto. Tal que así:
declare module "*.json" { const value: any; export default value; }
Ahora para recuperar el contenido del fichero simplemente seria invocar al servicio JsonDataService y la variable info.
Categorias
- adobe (2)
- agile (1)
- Alfresco (1)
- Android (26)
- Angular (6)
- angularjs (10)
- axis (2)
- Bases de datos (14)
- Bootstrap (1)
- C# (3)
- chrome (2)
- Codeigniter (2)
- Control de Versiones (2)
- CSS (24)
- CVS (1)
- Django (9)
- Django Rest Framework (1)
- DNS (1)
- Docker (1)
- dominio (1)
- eclipse (5)
- Entity Framework (2)
- ETL (1)
- Firefox (5)
- flash (1)
- Git (7)
- Groovy (1)
- Handlebars (1)
- hibernate (4)
- hosting (1)
- HTML (45)
- HTML 5 (20)
- Impresión 3D (8)
- IOS (2)
- ireports (3)
- Java (40)
- Javascript (49)
- JBoss (3)
- JPA (2)
- JQuery (20)
- Json (5)
- JSP (5)
- Lamp (1)
- lean (1)
- linkedin (1)
- LINQ (1)
- linux (11)
- Livecycle (1)
- log (1)
- microcontroladores (1)
- MongoDB (4)
- MySQL (7)
- Node.js (5)
- OC4J (1)
- Openshift (2)
- Oracle (5)
- Patrones de Diseño (1)
- Photoshop (2)
- php (19)
- PostgreSQL (1)
- python (18)
- rabbitmq (1)
- Raspberry PI (13)
- Raspherry PI (5)
- seguridad (3)
- Selenium (3)
- Sencha Touch (1)
- Sin categoría (16)
- Spring (13)
- SQL (7)
- SQLServer (1)
- struts (2)
- SVN (1)
- Talend (1)
- Tomcat (5)
- unity (3)
- Visual Studio Code (2)
- vmware (4)
- Web Services (11)
- windows (17)
- wordpress (10)
- xml (2)
Trabajos Realizados
- App Android – Autoka Fr
- App Android – Cartelera Cántabra
- App Android – Gramática y Vocabulario Ingles
- App Android – Hoja de Gastos
- App Android – Hotel Torre Cristina
- App Android – OcioEnjoy
- App Android – Visor CardBoard
- App Firefox – Managapp
- DiamanteBomba – DisasterCode
- Generador de Partes de Trabajo
- GitHub – Android Web Generator
- GitHub – Dynamic Angular Gallery
- GitHub – Sotilizator
- GitHub – SpringAngularJS
- GitHub – Swiper Dynamic Angular Gallery
- HazParejas – DisasterCode
- RompeCabezas – DisasterCode
- Unity Game – English Couple
- Unity Game – Kill Wasp
- WordPress – El Buen Apicultor
- WordPress – El Cajón de los Retales
- WordPress – El Vestidito Azul
- WordPress – Feuchas
- WordPress – Fragua de Navajas Ponce
- WordPress – Humor a las Tres
- WordPress – Photo Places