Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get the data from local JSON, to the HTML page using ionic 2 typescript

I have this type of JSON file.

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

How to bring each and every key into the html page or how to parse this one using service?

Thanks in advance.

like image 983
Santhosh Kumar Avatar asked Nov 29 '16 05:11

Santhosh Kumar


1 Answers

You can do so by creating a service provider

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

Define the service in your ts constructor and call the method to parse through the data

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

Make sure to define the service provider in app.module.ts

For promises as in your case modify the code as follows: In your 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);
        });
    });
}

Here you are getting data and resolving to promise. To use this in html you have to get the data in your component page as follows.

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

You can now use the patdata in your html

<h1> {{patdata | json}} </h1>
like image 146
AishApp Avatar answered Nov 10 '22 11:11

AishApp