Getting JSON Data using Http in Ionic 3

Question

Having troubles with Ionic getting data from a JSON File via HTTP, I dont know what is the problem the error is quite strange.

here are the codes :

src/pages/subhome/line/line.ts (The Subhome contains a few folders of 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 is the JSON file :

src/pages/subhome/line/line.json

{
	"commands": [{
			"title": "a",
			"desc": "b"
		},
		{
			"title": "a",
			"desc": "b"
		},
		{
			"title": "a",
			"desc": "b"
		},
		{
			"title": "a",
			"desc": "b"
		}
	]
}

What I'm trying to do is "logging" the JSON commands to the console Thanks in advance!

Marouan · Accepted Answer · 2017-10-11 14:21:00Z

1

move your JSON file to assets folder, and call it via

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

answered Oct 11, 2017 at 14:21

Marouan

2171 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

shiben · Accepted Answer · 2017-10-11 05:41:49Z

0

HTTP methods are used to make calls to remote servers. As far as i know these methods are not used to call any file within your app For passing data among pages you can use something like this this.navController.push(SecondPage, { param1: 'firstname', param2: 'lastname' });

see tutorial here

If it is JSON data that you want to access, consider storing it in a variable or you can use the local storage like below

this.storage.set('myData', data);

Dont forget to import and inject

import { Storage } from '@ionic/storage';
constructor (public storage: Storage){}

answered Oct 11, 2017 at 5:41

shiben

233 silver badges11 bronze badges

Collectives™ on Stack Overflow

Getting JSON Data using Http in Ionic 3

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related