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

Question

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

Demandé el 9 de Septembre, 2016: Quand la question a-t-elle été
93029 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

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.

Demandé el 9 de Septembre, 2016 par Vishu

0 votes

angular.io/docs/ts/latest/guide/server-communication.html

Commenté el 9 de Septembre, 2016 par Günter Zöchbauer

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.

Commenté el 9 de Septembre, 2016 par Günter Zöchbauer

Answer 1

5 Réponses

Answer 2

61voto

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

     }
}

Répondu el 9 de Septembre, 2016 par Bünyamin Sarıgül (1514 Points )

0 votes

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

Commenté el 7 de Juillet, 2017 par Jeff

1 votes

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

Commenté el 17 de Juillet, 2017 par Pardeep Jain

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.

Commenté el 17 de Juillet, 2017 par Bünyamin Sarıgül

Afficher 3 autres commentaires

Answer 3

39voto

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

Répondu el 3 de Mai, 2017 par HydTechie (27 Points )

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.

Commenté el 20 de Mai, 2017 par Praveen M P

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'.

Commenté el 1 de Août, 2017 par Michael Philips

Answer 4

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.

Répondu el 9 de Juillet, 2017 par Vijay Gajera (673 Points )

Answer 5

8voto

Jana Points 206

Dans Angular 5

vous pouvez simplement dire

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

Cela vous donnera Observable<Example>

Répondu el 14 de Novembre, 2017 par Jana (206 Points )

Answer 6

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

Répondu el 9 de Septembre, 2016 par John Baird (1755 Points )

0 votes

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

Commenté el 12 de Mars, 2017 par yonexbat

0 votes

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

Commenté el 16 de Février, 2018 par Ziggler

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

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: