Help me: How to read a native Json file in Ionic 2

#1

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.""}}]}]
#2

Where does this file live?

#3

Hello, I have it inside the www folder, example www / Gif / gif.json

#4
#5

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!");
        
        }
    );
  }
}
#6

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."
		}
	}]
}]
#7

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.

#8

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.

#9

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>
#10

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')
    }
   )
#11

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.