How to properly http get a json file

hi, i’m trying to perform an http get request for one of my json file who look like this

“data”: [
{ “id”: “1”, “name”: “Windstorm” },
{ “id”: “2”, “name”: “Bombasto” },
{ “id”: “3”, “name”: “Magneta” },
{ “id”: “4”, “name”: “Tornado” }
“data2”: [
{ “id”: “5”, “name”: “Windstorm” },
{ “id”: “6”, “name”: “Bombasto” },
{ “id”: “7”, “name”: “Magneta” },
{ “id”: “8”, “name”: “Tornado” }

so i’m using a service to get the json who look like this

` import {Injectable} from ‘angular2/core’;
import {Http} from ‘angular2/http’
import ‘rxjs/Rx’;


export class Skillservice {
static get parameters() {
return [[Http]];
constructor(http) {
this.http = http;

this.skills = this.http.get(’…/json/skills.json’).map(res => res.json());



when i subscribe to this service , i get this error
anyone can help me to figure out , how to http get properly ?


Where in your project do you store the json file?

I suspect it is under the app folder. You need to place it under the www folder to make it available after the app has been built by webpack.


haha thanks its works

Does it work when you build your app for Android? When I build my app for Android, it fails to load the JSON file, but looking at it in a browser works just fine.

1 Like

yes it works pretty much fine, my json is in www/build/json and i’m loading it like this
this.skills = this.http.get('build/json/skills.json').map(res => res.json());

Sir can you also share the html code for showing the data ?please

I’m having the same problem as @dudeofawesome above. It loads correctly in the browser via ionic serve but when I run it on an android device: ionic run android I get an error telling me the file doesn’t exist

i load it like this:

import {Injectable} from ‘@angular/core’;
import { Http } from ‘@angular/http’;
import ‘rxjs/add/operator/map’;

export class HomePage {
private data: any;

constructor(private http: Http) { }

.map((res) => res.json())
.subscribe(data => { = data;
}, (rej) => {console.error(“Could not load local data”,rej)});

Yup I finally figured it out, I wasn’t storing my file in the assets folder.

 //let items :any[]=[];
return this.http.get('build/json/car_model_details.json').map((response :Response)=>response.json())
.subscribe(data =>{ 

I am giving the Path of the file like this.

But it is giving me the error that

"GET http://localhost:8100/build/json/car_model_details.json " Not Found

i have figured that error by placing the json file in the assets folder

Can anyone suggest me how to access the json from the web.

I am trying like below:

.map((res) => res.json())
.subscribe(data => { = data;
}, (rej) => {console.error(“Could not load local data”,rej)});

But getting an error like below:

Failed to load No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8100’ is therefore not allowed access.


having same issue as @golear

did you manage to find a solution @golear

@golear just remove the preceeding …/…/ before assets and it works

1 Like