39 votes

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

Comme je suis nouveau dans le monde d'Angular, quelqu'un peut-il me donner une solution simple pour charger les données d'un fichier JSON en utilisant Angular 2 ?

Mon code est le suivant

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. Veuillez me conseiller en détail.

2 votes

Veuillez poster le code et les erreurs sous forme de texte plutôt que de captures d'écran, car les captures d'écran ne sont pas consultables.

60voto

Bünyamin Sarıgül Points 1514

Voici une partie de mon code qui analyse le 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));

     }
}

0 votes

Dans l'instruction catch, vous devriez probablement renvoyer l'erreur puisque vous l'enregistrez dans le constructeur, non ?

1 votes

PS : parfois, si json n'est pas valide, vous devez utiliser res.text() au lieu de res.json() au moment de .map

1 votes

@Jeff console.log renvoie à undefined et enregistre également l'erreur. Cela a été utile dans mon cas. @Pardeep comme je l'ai dit c'était la solution pour mon cas, mais votre contribution peut aider d'autres personnes. Merci.

38voto

HydTechie Points 27

Conservez le fichier json dans le répertoire Assets (parallèle au répertoire de l'application).

Notez que si vous avez généré avec ng new YourAppname- ce répertoire assets existe sur la même ligne que le répertoire 'app', et les services doivent être un répertoire enfant du répertoire app. Cela peut ressembler à ce qui suit :

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

1 votes

J'ai créé un autre dossier et j'ai essayé d'accéder au fichier mais cela n'a pas fonctionné. La seule façon dont cela a fonctionné est de garder le fichier json dans le dossier assets. Je ne sais pas pourquoi ça fonctionne comme ça.

4 votes

Parce que vos dossiers de composants ne peuvent contenir que quatre types de fichiers : 1) '.html' 2) '.css' ou '.scss' 3) '.spec.ts' 4) et votre fichier 'component.ts'. En dehors de ces quatre types, vous ne pouvez pas ajouter d'autres types, comme .json. Les autres types, comme les images, par exemple : .png, .jpeg ou .json, doivent être conservés en dehors du dossier 'app'.

11voto

Vijay Gajera Points 673

Si vous utilisez angular-cli Conservez le fichier json dans le répertoire 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 vous devez seulement donner le chemin à l'intérieur du dossier assets comme assets/json/oldjson.json alors vous devez écrire le chemin comme /json/oldjson.json

Si vous utilisez webpack, vous devez suivre la même structure dans le dossier public, qui est similaire au dossier assets.

8voto

Jana Points 206

Dans Angular 5

vous pouvez simplement dire

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

Cela vous donnera Observable<Example>

6voto

John Baird Points 1755

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

0 votes

Les fichiers de <votreprojet>/src/app/xy.json sont trouvés dans this.http.get(./app/xy.json)

0 votes

@yonexbat...Cela dépend de l'emplacement du fichier ts dans lequel vous écrivez ce code. Ce n'est pas toujours vrai...

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X