Jak uzyskać dane z lokalnego JSON, do strony HTML za pomocą jonowego 2 maszynopisu

Question

Mam tego typu plik JSON.

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

Jak wprowadzić każdy klucz na stronę html lub jak go przeanalizować za pomocą usługi?

Z góry dziękuję.

Answer 1

Można to zrobić poprzez stworzenie usługodawcy

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

Zdefiniuj usługę w swoim konstruktorze ts i wywołać metodę analizowania przez dane

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

Upewnij zdefiniować usługodawcy w app.module.ts

Za obietnice, jak w Twoim przypadku, zmień kod w następujący sposób: W swoim serwisie.

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

Tutaj otrzymujesz dane i postanawiasz obiecać. Aby użyć tego w html, musisz pobrać dane ze strony komponentu w następujący sposób.

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

Możesz teraz użyć patdata w html

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