web-dev-qa-db-fra.com

Comment obtenir les données du JSON local, vers la page HTML en utilisant ionic 2 typescript

J'ai ce type de fichier JSON.

{
  "records": {
    "patients": {
      "day": "Today",
      "details": [
        {
          "name":"Diab",
          "stat":"Pending",
          "phno":"8197246465",
          "patNames":"Sandra Adams",
          "tests": [
            {"name":"MCHC","result":"positive"}
          ]
        }
      ]
    }
  }
}

Comment introduire chaque clé dans la page html ou comment analyser celle-ci en utilisant le service?

Merci d'avance.

angulartypescriptionic2
8
Santhosh Kumar

Vous pouvez le faire en créant un fournisseur de services

import {Injectable} from '@angular/core';
import {Http, Response} from '@angular/http';
import 'rxjs/Rx';

@Injectable()
export class yourService {
    constructor(public http:Http) {}

getData() {
    return this.http.get("YOUR_PATH_TO_THE_JSON_FILE")
        .map((res:Response) => res.json().YOUR_JSON_HEADER); //records in this case
  }
}

Définissez le service dans votre constructeur ts et appelez la méthode pour analyser les données

this.yourService.getData().subscribe((data) => {
  console.log("what is in the data ", data);
  this.myjsondata = data;
});

Assurez-vous de définir le fournisseur de services dans app.module.ts

Pour les promesses comme dans votre cas, modifiez le code comme suit: A votre service.

load() {
    console.log('json called');
    return new Promise(resolve => {
        this.http.get('assets/data/patient.json').map(response => {
            this.data = response.json();
            resolve(this.data);
        });
    });
}

Ici, vous obtenez des données et décidez de promettre. Pour l'utiliser en html, vous devez obtenir les données dans la page de votre composant comme suit.

this.yourService.load().then((data) => {
      console.log("what is in the data ", data);
      this.patdata= data;
    });

Vous pouvez maintenant utiliser les patdata dans votre html

<h1> {{patdata | json}} </h1>
25
AishApp