web-dev-qa-db-fra.com

Comment récupérer un fichier JSON dans Angular 2

comme je suis nouveau sur Angular, tout le monde peut-il donner une solution simple pour charger les données du fichier JSON en utilisant angular 2.

Mon code est comme ci-dessous

Index.html 

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/styles.css">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

app.component.ts

import {Component} from '@angular/core';
  
@Component({
  selector: 'my-app',
  template: `
          <div id="main">
            Main Div
               <div id = "header"></div>
               <div id = "content">
                  <ul class="games">
                      <li>
											
                      </li>
                  </ul>
               </div>
          </div>
  		 `
})
export class AppComponent {
 }

jeux.json 

{
	"games":[
		{
			"title":"Primary Operations",
			"enabled":true
		},
		{
			"title":"Curated Games",
			"enabled":false
		}
	]
}

Je veux récupérer tous les jeux de games.json dans li à app.component.ts S'il vous plaît aviser en détail.

Merci d'avance

jsonangular
31
Vishu

Voici une partie de mon code qui analyse JSON, cela peut vous être utile:

import { Component, Input } from '@angular/core';
import { Injectable }     from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import {Observable} from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class AppServices{

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

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

     }
}
53
Bünyamin Sarıgül

Conservez le fichier json dans le répertoire Assets (parallel to app dir)

Notez que si vous avez généré avec ng new YourAppname, ce répertoire d'actifs existe à la même ligne que le répertoire 'app' et les services doivent être le répertoire enfant du répertoire app. Peut ressembler à ci-dessous:

:: 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);
}
36
HydTechie

Si vous utilisez angular-cli Conservez le fichier json dans le répertoire Assets (parallèle au répertoire de l'application).

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);
}

Remarque: ici, vous devez uniquement indiquer le chemin dans le dossier des ressources, tel que assets/json/oldjson.json, puis vous devez écrire le chemin, tel que /json/oldjson.json 

Si vous utilisez webpack, vous devez suivre la même structure que celle du dossier public, similaire à celle du dossier assets.

11
Vijay Gajera

En angulaire 5

vous pouvez juste dire 

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

Cela vous donnera Observable<Example>

8
Jana

Vous devez appelerHTTPvotre games.json pour le récupérer .

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

Vous n'avez pas besoin de HttpClient , vous n'avez même pas besoin de Angular. Tout ce dont vous avez besoin est WebPack et JSON-Loader, les deux font déjà partie de Angular-CLI. 

Tout le code dont vous avez besoin est cette ligne:

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

Et le json-data se trouve sous someName.default. Cependant, ce code générera une erreur de type du compilateur TypeScript - ce n'est pas une erreur réelle, mais seulement une erreur de type.

Pour le résoudre, ajoutez ce code à votre fichier src/typings.d.ts (s'il n'existe pas, créez-le):

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

/ Veuillez noter : que cette méthode compilera votre json (minify/uglify) dans le bundle d'applications au moment de la compilation. Cela signifie que vous n'aurez pas besoin d'attendre le chargement de ce fichier - comme vous le feriez si vous choisissez de travailler avec httpClient.get(...) - ce qui signifie une application plus rapide!

2
Gil Epshtain

je pense que le dossier des actifs est public, vous pouvez y accéder directement sur le navigateur.

http: // localhost: 4020/assets/

contrairement à d'autres dossiers privés, déposez votre fichier json dans le dossier actifs

2
Anthony Agbator
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
--------------------------------------------

// Dans ce composant, récupérez les données à l'aide de suscribe (), stockez-les dans un objet local en tant que dataObject et affichez-les dans display.component.html, comme {{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)
}
}
1
Raviraj S Kharvi

Je devais charger le fichier de paramètres de manière synchrone, et voici ma solution:

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);
    }
}

Ceci est ensuite fourni en tant qu'app_initializer qui est chargé avant le reste de l'application. 

app.module.ts 

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