Get JSON file working with serve, not on real device

Ionic Framework ionic-v3
1

Hi there !

I am trying to add markers dynamically on a google map using a JSON file with HttpModule. It’s working when I serve it with “ionic serve” I get my three console.log messages ( see below) and the console show the datas. However when I try to launch it on my iPhone, I get only the console.log(‘1’) and my markers are not displayed… any idea why ?

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
import {Info } from '../info/info';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

declare var google;
var data:any;
 
@Component({
  selector: 'map-page',
  templateUrl: 'map.html'
})
export class MapPage {
 
  @ViewChild('map') mapElement: ElementRef;
  map: any;
  newsData: any;

 
  constructor(public http: Http, public navCtrl: NavController,public geolocation: Geolocation) {
 
  }
 
  ionViewDidLoad(){
    this.loadMap();
    this.getMarkers();

  }



(...)




getMarkers() {
  console.log('1')
  this.http.get('../../assets/bar.json')
  .map((res) => res.json())
  .subscribe(data => {
    console.log('2')
    this.addMarkersToMap(data);
    
  });
}

addMarkersToMap(markers) {
  for(let marker of markers) {
    console.log('3')
    var position = new google.maps.LatLng(marker.latitude, marker.longitude);
    var dogwalkMarker = new google.maps.Marker({position: position, title: marker.nom});
    dogwalkMarker.setMap(this.map);
  }
}

Here is my module :

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { Geolocation } from '@ionic-native/geolocation';
import { MyApp } from './app.component';
import { MapPage } from '../pages/map/map';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { MonCompte } from '../pages/monCompte/monCompte';
import { Info } from '../pages/info/info';  
import { HttpModule } from '@angular/http';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    MapPage,
    TabsPage,
    MonCompte,
    Info
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    MapPage,
    TabsPage,
    MonCompte,
    Info
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Geolocation,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
  ]
})
export class AppModule {}

Thank you ionic community ! :slight_smile:

2

I don’t know if you moved your assets folder around, but I believe this:

this.http.get('../../assets/bar.json')

should be

this.http.get('assets/bar.json')

I’m pretty sure the path isn’t correct and that causes issues on your device.

2 Likes
3

When you run ionic serve or ionic build “all” files are compiled in one .js file in your www folder. If you ant to open a local image or JSON file in your assets folder, you reach these files from the index.html file in your www folder.
This has nothing to do with your project structure in your src folder.

1 Like
4

thank you @luukschoen ! it works :slight_smile:

1 Like
5

awesome ! :slight_smile:

1 Like