Cómo obtener un archivo JSON en Angular 2

Mantener el archivo json en el directorio Assets (paralelo a app dir)

Tenga en cuenta que si hubiera generado con ng new YourAppname - este directorio de activos existe la misma línea con el directorio 'app', y los servicios deben ser el directorio hijo del directorio de aplicaciones. Puede verse como a continuación:

:: app / services / myservice.ts

getOrderSummary(): Observable {
    // get users from api
    return this.http.get('assets/ordersummary.json')//, options)
        .map((response: Response) => {
            console.log("mock data" + response.json());
            return response.json();
        }
    )
    .catch(this.handleError);
} 

Si utiliza angular-cli, Mantenga el archivo json dentro de la carpeta Assets (paralela a app dir) directorio

return this.http.get('<json file path inside assets folder>.json'))
    .map((response: Response) => {
        console.log("mock data" + response.json());
        return response.json();
    }
    )
    .catch(this.handleError);
}

Nota: aquí solo necesita dar la ruta dentro de la carpeta assets como assets/json/oldjson.json entonces necesitas escribir path como/json / oldjson.json

Si utiliza webpack, debe seguir la misma estructura anterior dentro de la carpeta pública, su carpeta similar como assets.

En Angular 5

Solo puedes decir

this.http.get<Example>('assets/example.json')

Esto te dará Observable<Example>

Necesita hacer una llamada HTTP a su games.json para recuperarlo. Algo como:

this.http.get(./app/resources/games.json).map

Creo que la carpeta assets es pública, puede acceder a ella directamente en el navegador

Http://localhost:4020/assets/

A diferencia de otras carpetas privadas, suelte su archivo json en la carpeta assets

service.service.ts
--------------------------------------------------------------

import { Injectable } from '@angular/core';
import { Http,Response} from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';

@Injectable({
  providedIn: 'root'
})
export class ServiceService {
 private url="some URL";

constructor(private http:Http) { }     

//getData() is a method to fetch the data from web api or json file

getData(){
           getData(){
          return this.http.get(this.url)
            .map((response:Response)=>response.json())
        }
          }
}






display.component.ts
--------------------------------------------

//En este componente obtiene los datos usando suscribe() y los almacena en el objeto local como DataObject y muestra los datos en display.componente.html como {{DataObject .propertyName}}.

import { Component, OnInit } from '@angular/core';
import { ServiceService } from 'src/app/service.service';

@Component({
  selector: 'app-display',
  templateUrl: './display.component.html',
  styleUrls: ['./display.component.css']
})
export class DisplayComponent implements OnInit {
      dataObject :any={};
constructor(private service:ServiceService) { }

  ngOnInit() {
    this.service.getData()
      .subscribe(resData=>this.dataObject =resData)
}
}

No necesitas HttpClient, ni siquiera necesitas Angular. Todo lo que necesita es WebPack y JSON-Loader, ambos ya forman parte de Angular-CLI.

Todo el código que necesitas es esta línea:

import * as someName from './somePath/someFile.json;

Y los datos de su json se pueden encontrar en someName.default. Sin embargo, este código lanzará un error de tipo desde el compilador de TypeScript-esto no es un error real, sino solo un error de tipo.

Para resolverlo agregue este código a su archivo src/typings.d.ts (si no existe, cree it):

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

Tenga en cuenta: que trabajar en este método compilará su json (minify/uglify) en el paquete de aplicaciones en el momento de la compilación. Esto significa que no tendrá que esperar hasta que se cargue este archivo, como lo hará si elige trabajar con httpClient.get(...), ¡lo que significa una aplicación más rápida!

Necesitaba cargar el archivo de configuración de forma sincrónica, y esta fue mi solución:

export function InitConfig(config: AppConfig) { return () => config.load(); }

import { Injectable } from '@angular/core';

@Injectable()
export class AppConfig {
    Settings: ISettings;

    constructor() { }

    load() {
        return new Promise((resolve) => {
            this.Settings = this.httpGet('assets/clientsettings.json');
            resolve(true);
        });
    }

    httpGet(theUrl): ISettings {
        const xmlHttp = new XMLHttpRequest();
        xmlHttp.open( 'GET', theUrl, false ); // false for synchronous request
        xmlHttp.send( null );
        return JSON.parse(xmlHttp.responseText);
    }
}

Esto se proporciona como un app_initializer que se carga antes que el resto de la aplicación.

App.módulo.ts

{
      provide: APP_INITIALIZER,
      useFactory: InitConfig,
      deps: [AppConfig],
      multi: true
    },