Ionic2 read data from json file issue

Ionic Framework ionic-v3
1

/I have created constantservice class/

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

@Injectable()

export class ConstantService {
data:any;
constructor(public http:Http){ };
getData() {
return this.http.get(“assets/data/datafolder.json”)
.map((res:Response) => res.json().YOUR_JSON_HEADER); //records in this case
}

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

}

in app.component.ts

import { ConstantService } from ‘…/service/constantservice’;

@Component({
templateUrl: ‘app.html’,
providers: [ConstantService]
})

export class MyApp {
myjsondata:any;
patdata:any;
constructor( public constantServiceData: ConstantService) {

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

  });

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

});

}

/**json data/

/datafolder.json in assets/data/

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

bot cases data is showing undefinde

/app moule .ts/

import { HttpModule } from ‘@angular/http’;

imports:[HttpModule]

/**** is anything iam missing it , showing no errros too **/

2

solved we need to keep data in assets folder to work in all the platforms

3

You say it’s solved, but your real issue is that you’ve wrapped the http call in a promise! I see these examples all the time on the forum. Please read about subscribers and how they work, don’t use promises when using Angulars Http (since you can subscribe to them in your component). It’s not necessary to use promises and subscribab are very good/clean when dealing with async tasks.

It just doesn’t make sense to put a promise around those http calls, just return
get () { return this.http.get(request_url).map( res=> res.json() ) }

and then do this in your component:

this.constantServiceData.get().subscribe(
(result)=>{ 
 console.log(result)
},
(err) => {
console.error(err)
},
() => {
console.log('done retrieving data from service');
});
4

Thank you Bro.To make me understand the difference between when to use subscribe and promise .But in final code which is not posted in forum is using only subscribe as you explain ed above.
Thanks for making me to understand the difference it really helps me.

5

I have one more question why can’t we can keep the json data anywhere in src folder why we need to place in assets folder is there any reason

6

Okay, good for you. Promises are nice, but subscribers are way better :wink: Yes, assets folder is designed to be copied over by the build script into your www folder. If you create custom folders outside the assets folder, you should manually add them into the build process if you want them to be copied over.