Struggling with Ionic, trying to fetch data from a JSON File using HTTP, but encountering a strange error.
https://i.sstatic.net/L2nVo.png
Below are the relevant code snippets :
src/pages/subhome/line/line.ts
(The Subhome consists of multiple nested pages)
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
/**
* Generated class for the LinePage page.
*
* See http://ionicframework.com/docs/components/#navigation for more info
* on Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-line',
templateUrl: 'line.html',
})
export class LinePage {
commands: any[] = []
constructor(public navCtrl: NavController, public navParams: NavParams, private http: Http) {
this.http.get('line.json').map(res => res.json()).subscribe((data) => {
this.commands = data.json();
console.log(this.commands);
})
}
ionViewDidLoad() {
console.log('ionViewDidLoad LinePage');
}
}
And here's the JSON file content:
src/pages/subhome/line/line.json
{
"commands": [{
"title": "a",
"desc": "b"
},
{
"title": "a",
"desc": "b"
},
{
"title": "a",
"desc": "b"
},
{
"title": "a",
"desc": "b"
}
]
}
The goal is to display the JSON commands in the console for logging purposes. Thanks in advance!