How to print Json Files on Android page

Ionic Framework ionic-v3
2

I don’t know what on earth the recipe stuff is supposed to be doing in there, but I’m going to assume you’re sort of copying code you found from some other place and hoping that it will work. This is called cargo cult programming and doesn’t generally produce very helpful results.

The first step is always to define interfaces that represent the various units of your data. Books have names, chapters have verses, and so on. Especially if you’re planning to iterate across these things using *ngFor in your templates, it would be much more natural to switch to using arrays instead of objects:

[{
  "abbrev": "gn",
  "book": "Genesis",
  "chapters": [
    [
      "At the first God made the heaven and the earth.",
      "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.",
      "And God said, Let there be light: and there was light.",
    ],
  ],
}]

Now we can model the domain like this:

export interface Chapter {
  verses: string[];
}

export interface Book {
  abbrev: string;
  book: string;
  chapters: Chapter[];
}

export interface Bible {
  books: Book[];
}

export class BibleService {
  ready: Promise<void>;
  bible: Bible;
  constructor(http: Http) {
    this.ready = http.get('data/gif.json').toPromise();
    this.ready.then(bible => this.bible = bible);
  }
}

export class TocPage {
  constructor(private _nav: NavController) {}
  gotoBook(ix): void { this._nav.push(BookPage, {ix: ix}); }
}

<button (click)="gotoBook(0)">Genesis</button>

export class BookPage {
  book: Book;
  constructor(np: NavParams, bible: BibleService) {
    let bookix = np.get('ix');
    this.book = bible.ready.then(() => this.book = bible.bible[bookix]);
  }
}

<h1>Book of {{book.book}}</h1>
<div *ngFor="let chapter of book.chapters; let cix = index">
  <h2>Chapter {{cix+1}}</h2>
  <div *ngFor="let verse of chapter.verses; let vix = index">
  {{vix+1}}. {{verse}}
  </div>
</div>
1 Like