javascript - proyecto - manual angular 6

Angular 5 Service para leer el archivo.json local

Question

Estoy usando Angular 5 y he creado un servicio usando angular-cli

Lo que quiero hacer es crear un servicio que lea un archivo json local para Angular 5.

Esto es lo que tengo ... estoy un poco atascado ...

import { Injectable } from ''@angular/core'';
import { HttpClientModule } from ''@angular/common/http'';

@Injectable()
export class AppSettingsService {

  constructor(private http: HttpClientModule) {
    var obj;
    this.getJSON().subscribe(data => obj=data, error => console.log(error));
  }

  public getJSON(): Observable<any> {
    return this.http.get("./assets/mydata.json")
      .map((res:any) => res.json())
      .catch((error:any) => console.log(error));

  }

}

¿Cómo puedo terminar esto?

Answer 1

Encontré esta pregunta cuando buscaba una forma de leer realmente un archivo local en lugar de leer un archivo del servidor web, que preferiría llamar un "archivo remoto".

Solo llame require :

const content = require(''../../path_of_your.json'');

El código fuente de Angular-CLI me inspiró: descubrí que incluyen plantillas de componentes al reemplazar la propiedad template por template y el valor mediante una llamada obligatoria al recurso HTML real.

Si usa el compilador AOT, debe agregar las definiciones de tipo de nodo ajustando tsconfig.app.json :

"compilerOptions": {
  "types": ["node"],
  ...
},
...

Answer 2

Para Angular 7, seguí estos pasos para importar directamente datos json:

En tsconfig.app.json:

agregue "resolveJsonModule": true en "compilerOptions"

En un servicio o componente:

import * as exampleData from ''../example.json'';

Y entonces

private example = exampleData;

Answer 3

Primero debe inyectar HttpClient y Not HttpClientModule , lo segundo que debe eliminar .map((res:any) => res.json()) ya no lo necesitará porque el nuevo HttpClient le dará el cuerpo de la respuesta por defecto, finalmente asegúrese de importar HttpClientModule en su AppModule :

import { HttpClient } from ''@angular/common/http''; 
import { Observable } from ''rxjs/Observable'';

@Injectable()
export class AppSettingsService {

   constructor(private http: HttpClient) {
        this.getJSON().subscribe(data => {
            console.log(data);
        });
    }

    public getJSON(): Observable<any> {
        return this.http.get("./assets/mydata.json");
    }
}

para agregar esto a su componente:

@Component({
    selector: ''mycmp'',
    templateUrl: ''my.component.html'',
    styleUrls: [''my.component.css'']
})
export class MyComponent implements OnInit {
    constructor(
        private appSettingsService : AppSettingsService 
    ) { }

   ngOnInit(){
       this.appSettingsService.getJSON().subscribe(data => {
            console.log(data);
        });
   }
}

Answer 4

Prueba esto

Escribe el código en tu servicio

import {Observable, of} from ''rxjs'';

importar archivo json

import Product  from "./database/product.json";

getProduct(): Observable<any> {
   return of(Product).pipe(delay(1000));
}

En componente

get_products(){
    this.sharedService.getProduct().subscribe(res=>{
        console.log(res);
    })        
}

Answer 5

Tienes una solución alternativa, importando directamente tu json.

Para compilar, declare este módulo en su archivo typings.d.ts

declare module "*.json" {
    const value: any;
    export default value;
}

En su código

import { data_json } from ''../../path_of_your.json'';

console.log(data_json)

Answer 6

import data  from ''./data.json'';
export class AppComponent  {
    json:any = data;
}

Vea este artículo para más detalles .