@tomtom92 (Tomtom92) posted a new topic, subject "Get JSON file working with serve, not on real device". It read:

   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 ?
    [code] 
        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);
          }
        }
        
    [/code]
    
    Here is my module :
    [code] 
        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 {}
        
    [/code]
    
    Thank you ionic community !

To which @luukschoen replied

    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.

Then @LoLStats (Daniel Sogl) said

    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.

To which @tomtom92 (Tomtom92) replied

    thank you @luukschoen ! it works

So @paco7777 (Paco7777) replied

    awesome !


{'source': 'discourse', 'url': 'https://forum.ionicframework.com/t/get-json-file-working-with-serve-not-on-real-device/88647', 'title': 'Get JSON file working with serve, not on real device', 'views': 1623, 'has_accepted_answer': True, 'word_count': 433, 'like_count': 5, 'reply_count': 2, 'participant_count': 4, 'posts': 5, 'tags': '', 'author': '@tomtom92 (Tomtom92)', 'participants': '@tomtom92 (Tomtom92), @luukschoen, @LoLStats (Daniel Sogl), @paco7777 (Paco7777)', 'image_url': [None], 'created_at': '2017-05-02T18:59:48.939Z', 'last_posted_at': '2018-03-01T22:08:20.061Z'}