Extracting JSON data from a JSON file in my project and viewing it using "ionic serve" on my Mac has been successful. However, I am facing an issue after building for IOS in XCode. I import the generated project into XCode as usual, but the JSON data is not visible when running in XCode or on my iPhone.
I am using the latest version of all components and working on a Mac.
If anyone can help me identify what I might be doing wrong or missing, I would greatly appreciate it!
Below are snippets of my code:
**src/assets/data/kjv.json**
JSON file location
**src/providers/my-data/my-data.ts:**
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class MyData {
constructor(public http: Http) {
}
getLocalData(){
return this.http.get('../../assets/data/kjv.json');
}
}
**src/pages/home/home.ts:**
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { MyData } from '../../providers/my-data/my-data';
import { ChaptersPage } from '../chapters/chapters';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
items: any;
constructor(public navCtrl: NavController, public myService: MyData) {
}
ionViewDidLoad(){
this.myService.getLocalData().map(res => res.json()).subscribe(data => {
this.items = data;
});
}
nextPage(bookNo){
localStorage.setItem('bookNumber', bookNo);
this.navCtrl.push(ChaptersPage);
}
}
**src/app/app.module.ts:**
import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { ChaptersPage } from '../pages/chapters/chapters';
import { VersesPage } from '../pages/verses/verses';
import { TabsPage } from '../pages/tabs/tabs';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { MyData } from '../providers/my-data/my-data';
@NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
ChaptersPage,
VersesPage,
TabsPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
HttpModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
ChaptersPage,
VersesPage,
TabsPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
MyData
]
})
export class AppModule {}