Santhosh Kumar Santhosh Kumar - 1 year ago 276
TypeScript Question

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": [
"patNames":"Sandra Adams",
"tests": [

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

Thanks in advance.

Answer Source

You can do so by creating a service provider

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

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 => {
   = response.json();

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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download