Hello, I am developing a bible in ionic 2, I have already taken an important step in this development, reading the json files is hard for me, I am already layers to read the abbreviation, the name of the book and the chapter, but to the I do not know how to read the verses.
export class HelloIonicPage
{
items: Array<{title: string, note: string}>;
constructor(public navCtrl: NavController, public http: Http)
{
this.http.get('https://raw.githubusercontent.com/Jhan321/Bible-RV/master/Biblia/rvres.json')
.map(res =>
res.json()).subscribe(data =>
{
console.log(data[0].book);
this.items = [];
for(let i = 0; i < 66; i++)
{
this.items.push({
title: data[i].book,
note: data[i].abbrev
});
}
});
}
itemSelected(event, item)
{
this.navCtrl.push(ItemDetailsPage, {item: item});
}
}
This is the output on my page
<ion-content>
<ion-list no-lines>
<button ion-item *ngFor="let item of items" (click)="itemSelected($event,item)">
{{ item.title }}
<div class="item-note" item-right>
{{item.note}}
</div>
</button>
</ion-list>
</ion-content>
That looks like on the page
The entire point of storing this as JSON is to avoid munging the data with code like:
for(let i = 0; i < 66; i++) { this.items.push() }
I already gave you a JSON structure in a previous thread that will require no code manipulation. You read it directly into a bible object with one line of code. Convert the JSON to that format outside of the app.
1 Like
Well, I’m going to organize the Json format, since this is by object and not by matrix, I think that’s a problem.
@jhan321 Hello, it depends from where you are loading this, but @rapropos advice is really good.
Because from a Ionic/TypeScript code, it doesn’t make a difference between an object and an array (what you call a matrix with (0, “title: mathias”, “chapter: 10”, 1, “title:Jeremy”, “chapter: 11”) is globally the same if not processed in TypeScript.
And since you have a json format as input, you should really use some code like this map=>res(jsonfile).then() …
Input and Output is very important with Ionic, as all is async code.
1 Like
And after, when you have a correct map=>res(jsonfile) output, then you can parse it and display it in the view.
To debug always use console, aka
this.myTempArray = map=> res(myfile.json).then(
console.log (this.myTempArray)
)
That will help you a lot I think 
1 Like
Thanks a lot, it’s a great help, right now I’m modifying the Json file for a better read.
You’re welcome @jhan321, I didn’t explain it well, but have a check on joshmorony’s tutorial on that if you need more information (I learnt so much from his tuts, I just pay back).
This tutorial might help you a lot I think, it explains perfectly how to do a map==>res(jsonfile) …
https://www.joshmorony.com/using-http-to-fetch-remote-data-from-a-server-in-ionic-2/
Hope it helps,
@FrancoisIonic I have already seen all the tutorials you have this page, but with very little information when it comes to structuring an array of a Json file.
@rapropos Thanks for this post, because it does makes things much more clearier in my coding. And I also read why Firebase doesn’t use arrays for very good reasons that even I (low level coder in TypeScript) can understand (https://firebase.googleblog.com/2014/04/best-practices-arrays-in-firebase.html).
But I only said on a local level, an object stored locally (my app is built around that), doesn’t YET make the difference. Of course this will then become else an array or a pure object.
I hope I’m not too wrong in my sayings, but for beginners in Ionic 2/3, that I work on, I guess it’s not false.
@jhan321 Problably because he wants you to buy his book, but structuring a json file is dead simple. You can type wikipedia for that really Json file structure is more or less { (0, “a string”, “another string”), (1, “another string”, “another other string”)… }
exactly like an xml file with arrays, compared to SQL it’s just dead simple.
Then gentlemen, I should use in my Json file, an array for the versiculos or store them in objects
Matriz
{
"abbrev": "gn",
"book": "Genesis",
"chapters": [
"1 EN el principio criĂł Dios los cielos y la tierra.",
"2 Y la tierra estaba desordenada y vacĂa, y las tinieblas estaban sobre la haz del abismo, y el EspĂritu de Dios se movĂa sobre la haz de las aguas.",
"3 Y dijo Dios: Sea la luz: y fué la luz.",
Object
[
{
"abbrev": "gn",
"book": "Genesis",
"chapters": [
{
"1": {
"1": "EN el principio criĂł Dios los cielos y la tierra.",
"2": "Y la tierra estaba desordenada y vacĂa, y las tinieblas estaban sobre la haz del abismo, y el EspĂritu de Dios se movĂa sobre la haz de las aguas.",
"3": "Y dijo Dios: Sea la luz: y fué la luz.",
@jhan321 depends what is your data source, you can convert sql databases to json with one click, you can convert an xml file to json with one click… All depends from where you grab the “data” (sorry to talk the bible as “data input”) 
Because you can rewrite the bible in JSON but it would take you years !! I’m sure you can grab a translated csv, xml or other source !!
1 Like
At this time, I would like to learn how to read the Json files, since I do well on Unity3D, I am very new to Ionic 2 and would like to do it as easily as possible, I know that everything is not done in a single day, this is A very long career to perfect knowledge.
@jhan321 OK, well it’s tons easier than C+ and Unity, so it shouldn’t be hard for you. Try to explain better what you have as input and want as output, I’ll try my best. The reading part is often because you JS/TypeScript is not enough defined in JS, so if you console.log it it will return undefined.
1 Like
On any level, it is best to think of objects and arrays in JavaScript as completely different, incompatible beasts.
1 Like
@rapropos ok rapropos, I keep it as a note for myself, I won’t repeat that in ionic forums sorry.
Try this experiment. Take a scratch tabs project, and add this to the bottom of home.html:
<div *ngFor="let fruit of fruits">{{fruit}}</div>
Now in home.ts, give fruits an array:
fruits = ["apple", "banana", "cherry"];
Run it and see what happens. Now change fruits to an object that sort of looks like an array; roughly the thing you were describing earlier as “{ (0, “a string”, “another string”), (1, “another string”, “another other string”)… }”:
fruits = {"0": "apple", "1": "banana", "2": "cherry"};
Now what happens?
@rapropos @jhan321 Jhan321 said his issue was about to formally load and read JSON / text data from input data. I’m following discussion, If you provide me with a .json file @jhan321 i’ll put you the code later short time. Also @jhan321, sometimes you need to put a simple JSON.stringify(thing) to be able to process it later in TypeScript, don’t forget that Ionic is a mix of Angular, TypeScript, and old school JS.
Hi ,
I am having same issue here,
i am using ionic 2 to develop a bible but i couldn’t display the verses. I am new to ionic but have been able to display the books but having issues with the chapters and verses.
Below is how my bible json file looks like.
@jhan321 Please I wouldn’t mind you sharing your working code with me if you get this message .
Someone please help me out.
Thanks.