Ionic2 beta 8 load json file


#1

I’m using the latest beta 8 and I’m getting this error when trying to load a json file:

property ‘map’ does not exist on type ‘Observable’

My code:

//ANGULAR/IONIC CORE IMPORTS
import {ionicBootstrap, Platform, MenuController, Nav} from 'ionic-angular';
import {Component, ViewChild} from '@angular/core';
import {Http, Response} from '@angular/http';
import {StatusBar} from 'ionic-native';

//FOUND THIS SUGGESTION ON ANOTHER FORUM
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';

class MainApp
{
    @ViewChild(Nav) nav: Nav;

    public rootPage: any = LoginView;

    public HasSession: boolean = false;

    public DataMenu: Object;

    constructor(private platform: Platform, private menu: MenuController, private http: Http)
    {
        this.initializeApp();
    }

    private initializeApp()
    {
        this.platform.ready().then(() =>
        {
            StatusBar.styleDefault();
        });

        this.http.get('datamenu.json')
             .map((res: Response) => res.json())
             .subscribe(res => this.DataMenu = res);
    }
}

Can someone help me?

Thank you


#2

You can change to:

this.http.get(‘datamenu.json’)
.subscribe(res => {
this.DataMenu = res.json();
});


#3

You need to import that operator:

import 'rxjs/operators/map';

or adds all the operators to Observable (map, catch, etc) with:

import 'rxjs/Rx'; 

#4

I don’t think lack of imports is the problem, because the following code works perfectly for me in a scratch project with no rx-related imports at all:

http.get('foo.json').map((rsp) => rsp.json())
  .subscribe((foo) => {
    console.log(foo);
  });

#5

I added the suggested imports… but I’m still getting the error.

btw, i’m using Visual Studio 2015. Can be related to something with VS?


#6

For this error in VS2015, there’s a github issue & workaround mentioned here:


#7

Thank you! That solved the problem… :smile:

I suspected from VS 2015 because I installed VS Code and there was no errors there.