Hello all, I am developing a bible application in ionic 2, I have everything ready, the pages and everything, my problem is that I do not know how to call or read a Json file within the project. This is an example of the file
[{"abbrev": "gn", "book": "Genesis", "chapters": [{"1": {"1": "At the first God made the heaven and the earth.", "2": "And the earth was waste and without form; and it was dark on the face of the deep: and the Spirit of God was moving on the face of the waters.", "3": "And God said, Let there be light: and there was light.", "4": "And God, looking on the light, saw that it was good: and God made a division between the light and the dark,", "5": "Naming the light, Day, and the dark, Night. And there was evening and there was morning, the first day.", "6": "And God said, Let there be a solid arch stretching over the waters, parting the waters from the waters.", "7": "And God made the arch for a division between the waters which were under the arch and those which were over it: and it was so.""}}]}]
Where does this file live?
Hello, I have it inside the www folder, example www / Gif / gif.json
I have the call of the following form, forgive the disorder, esque everything I have done with tutorials, I just want to learn.
export class HelloIonicPage
{
posts: any;
constructor(public navCtrl: NavController, public http: Http)
{
this.http.get('gif/gif.json').map(res => res.json()).subscribe(data => {
this.posts = data.data.children;
},
err =>
{
console.log("Oops!");
}
);
}
}
And what is happening?
Add a console.log(data) inside the subscribe to have a look at the data.
The JSON you posted in your first post is actually invalid! If you copy/paste it on jsonlint.com you get an error. There is an " too much. This is the fixed version:
[{
"abbrev": "gn",
"book": "Genesis",
"chapters": [{
"1": {
"1": "At the first God made the heaven and the earth.",
"2": "And the earth was waste and without form; and it was dark on the face of the deep: and the Spirit of God was moving on the face of the waters.",
"3": "And God said, Let there be light: and there was light.",
"4": "And God, looking on the light, saw that it was good: and God made a division between the light and the dark,",
"5": "Naming the light, Day, and the dark, Night. And there was evening and there was morning, the first day.",
"6": "And God said, Let there be a solid arch stretching over the waters, parting the waters from the waters.",
"7": "And God made the arch for a division between the waters which were under the arch and those which were over it: and it was so."
}
}]
}]
Okay, I’ve already modified it, I stay as you said. Now, what do I do to call it? If you could give me an example of the book of genesis, you would infinitely please it.
I want it on the hell ionic page:
Genesis
1.In the beginning God created the heavens and the earth … etc.
You should move it under the assets folder I guess. Move it to assets/data or assets/json or whatever you want… then call it with this.http.get('assets/data/my_file.json') and it should work fine.
2 Likes
A little doubt, how should the html file be?
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>BIBLIA RV</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
</ion-content>
Looks fine to me. If I were you, I would abstract the http call into a service (let’s call it myService) which returns something like this to your HelloIonicPage:
getBooks(): Observable<any> { return this.http.get('gif/gif.json').map(res => res.json()); }
Where any should/could be replaced by the actual response type (if it’s known).
now you can call something like this from your page:
this.myService.getBooks.subscribe(
(result) => {
this.posts = result;
},
(err) => {
console.warn('Oops, something went wrong')
},
() => {
console.log('done running this function')
}
)
2 Likes
Muchas gracias, es usted muy amable con sus respuestas, me sirvio mucho.
Thank you very much, you are very kind with your answers, I served a lot.