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


comme je suis nouveau sur le Angular, quelqu'un peut-il s'il vous plaît donner une solution simple sur le chargement des données du fichier JSON en utilisant angulaire 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 aller chercher tous les jeux de games.json dans li sur app.component.ts S'il vous plaît conseiller en détail.

Merci d'avance


26
2017-09-09 07:25


origine


Réponses:


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

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

     }
}

43
2017-09-09 11:41



Conservez le fichier json dans le répertoire Assets (parallèle à app dir)

Notez que si vous aviez généré avec ng new YourAppname, ce répertoire de ressources existe même ligne avec 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);
} 

35
2018-05-03 12:20



Si vous utilisez angular-cli Conservez le fichier json dans le dossier Assets (parallèle au répertoire app)

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

Note: ici, il vous suffit de donner le chemin à l'intérieur du dossier de ressources, tel que assets / json / oldjson.json, puis d'écrire un chemin tel que /json/oldjson.json

Si vous utilisez webpack, vous devez suivre la même structure au-dessus du dossier public.


10
2017-07-09 06:29



En angulaire 5

tu peux juste dire

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

Cela vous donnera Observable<Example>


7
2017-11-14 10:11



Vous devez faire un HTTP appel à votre games.json pour le récupérer. Quelque chose comme:

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

6
2017-09-09 11:05



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 assets


1
2017-07-16 07:51



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 () et stockez-les dans l'objet local comme dataObject et affichez les données 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
2018-06-05 05:05



Je devais charger le fichier de paramètres de manière synchrone, et c'était 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
2018-02-06 05:47