How to properly http get a json file

Ionic Framework ionic-v3
1

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’;

@Injectable()

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
image
anyone can help me to figure out , how to http get properly ?

3 Likes
2

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.

2 Likes
3

haha thanks its works

4

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
5

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());

6

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

7

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

8

i load it like this:

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

@Injectable()
export class HomePage {
private data: any;

constructor(private http: Http) { }

getData(){
this.http.get(‘assets/data/mydata.json’)
.map((res) => res.json())
.subscribe(data => {
this.data = data;
}, (rej) => {console.error(“Could not load local data”,rej)});
}
}

9

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

10 
{
   console.log("getCarModelsInfo");
 //let items :any[]=[];
return this.http.get('build/json/car_model_details.json').map((response :Response)=>response.json())
.subscribe(data =>{ 
    console.log(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

11

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

12

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

I am trying like below:

getData(){
this.http.get(‘http://www.mywebsite.com/mydata.json’)
.map((res) => res.json())
.subscribe(data => {
this.data = data;
}, (rej) => {console.error(“Could not load local data”,rej)});
}
}

But getting an error like below:

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

2 Likes
13

having same issue as @golear

14

did you manage to find a solution @golear

15

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

1 Like