XCode and JSON

Hello and TIA,

I am successfully able to extract JSON data from a JSON file embedded into my project and view data when using “ionic serve” on my machine. (This works locally on my Mac using ionic serve)
I am having an issue after building for IOS in XCode.
I import the generated project into XCode (As I have successfully done in the past) but the JSON is no longer visible when running in XCode or when running on my IPhone.

I am running the latest version of everything and working on a mac.

Can someone please show me what I may be doing wrong or what I am missing?

Thanks again for any help!!!

I am including snippets of my code below:

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

Try Changing this to,

this.http.get('assets/data/kjv.json');

@nuttloose 1000 thanks for your answer.
This did indeed solve my problem.

1 Like

Welcome. You are giving the path relative to your project structure, but you have to give it relative to the compiled output in www folder (relative to index.html).

Cheers