How to, using a JSON file, pass a link to another ionic page (view)?


#1

Hello,

I’m very new with iOnic. I’m building a Wolof Bible and the text for the chapters come from a JSON that is recored in my assets page. But, for some words, I would like to link with a Glossary. How can I do it? I tried to use (click) inside JSON, but it doesn’t work…

JSON Example (I’m trying to link the word Yerusalem)

"chapter": "2",
      "verses": [
        {
          "1": "Bi nga xamee ne Yeesu juddu na ci Betleyem ci diiwaanu Yude, amoon na ay boroom xam-xam, ñu jóge penku, ñëw <a href='#' (click)='glossary('Yersusalem')' class='glossary'>Yerusalem</a>. Booba, ci jamonoy buur bi Erodd la woon.",
}
]

AND, in my TS file, I have created a function like this:

glossary(word){
    this.navCtrl.push(GlossaryPage);
  }

But when it appears in Application or in the simulation in my browser, nothing happens when I click in the linked word.

Did some one know how to help me to implement this feature? Thank you very much for your consideration. And sorry for my english.


#2

If you don’t get any better answers, I think HTML is a bad fit here. I would use an intermediate language as described here.


#3

Hello Rapropos. Thanks for your answer. What you mean with a intermediate language? I don’t understand very well. Thanks again.


#4

Markdown, as mentioned in that post I linked, would be an example. Here is another.


#5

Thanks again. The problem is that JSON have already HTML codes as

, , etc… I just want to put a link for some words in the main text…

This is a complete example of one JSON

{
  "book": "Macë",
  "chapters": [
    {
      "chapter": "1",
      "verses": [
        {
          "1": "Lii mooy cosaanu Yeesu Kirist, sëtu Daawuda, sëtu Ibraayma. <p></p>",
          "2": "Ibraayma moo jur Isaaxa; Isaaxa jur Yanqóoba; Yanqóoba jur Yuda ak i doomi baayam; <p></p>",
          "3": "Yuda, Fares ak Sara ci Tamar; Fares Esrom, miy baayu Aram; <p></p>",
          "4": "Aram Aminadab; Aminadab Naason; Naason Salmon; <p></p>",
          "5": "Salmon jur ci Raxab doom ju tudd Bowas; Bowas am ak Ruut Obedd; Obedd jur Yese,",
          "6": "miy baayu buur bi Daawuda. Daawuda moo jur Suleymaan ci ki nekkoon jabari Uri; <p></p>",
          "7": "Suleymaan jur Robowam; Robowam Abiya; Abiya Asaf; <p></p>",
          "8": "Asaf Yosafat; Yosafat Yoram, miy baayu Osiyas; <p></p>",
          "9": "Osiyas jur Yowatam; Yowatam Akas, miy baayu Esekiyas; <p></p>",
          "10": "Esekiyas Manase; Manase Amon; Amon Yosiyas; <p></p>",
          "11": "Yosiyas jur Yekoñas ak i doomi baayam ca jamono, ja ñ defe Yawut ya jaam, yóbbu leen Babilon. <p></p>",
          "12": "Ba ñ leen yóbboo ca Babilon, Yekoñas jur Salacel; Salacel Sorobabel,",
          "13": "miy baayu Abiyudd; Abiyudd Eliyakim; Eliyakim Asor; <p></p>",
          "14": "Asor Sadog; Sadog Akim; Akim Eliyudd; <p></p>",
          "15": "Eliyudd Eleyasar; Eleyasar Matan, miy baayu Yanqóoba; <p></p>",
          "16": "Yanqóoba nag moo jur Yuusufa jëkkëru Maryaama; te ci Maryaama la Yeesu, mi ñuy wax Kirist, juddoo. <p></p>",
          "17": "Mboolem giir googu nag, la dale ca Ibraayma ba ca Daawuda, fukk lañ ak ñeent; la dale ca Daawuda ba ca njaam ga ca Babilon, fukk lañ ak ñeent; la dale njaam ga ca Babilon ba ci Kirist, fukk lañ ak ñeent. <p></p>",
          "18": "Nii la Yeesu Kirist juddoo. Bi ñ mayee Maryaama ndeyam Yuusufa, waaye laata ñoo ànd, gis nañ ne dafa ëmb ci kàttanu Xel mu Sell mi.",
          "19": "Yuusufa jëkkëram nag, nekkoon na nit ku jub te bëggu ko woon a weer. Mu nar a xàccook moom ci sutura.",
          "20": "Waaye bi muy xalaat ci loolu, benn malaakam <strong>Boorom bi*</strong> daldi ko feeñ ci gént ne ko: « Yaw Yuusufa, sëtu Daawuda, bul ragal a yeggali Maryaama sa jabar, ndaxte doom ji mu ëmb, ci Xel mu Sell mi la jóge.",
          "21": "Dina jur doom ju góor; na nga ko tudde Yeesu, ndaxte moo di kiy musal xeetam ci seeni bàkkaar. »",
          "22": "Loolu lépp xewoon na, ngir amal li <strong>Boorom bi*</strong> wax, jaarale ko cib yonent, bi mu naan:",
          "23": "« Janq bi dina ëmb,jur doom ju góor,ñ tudde ko Emanuwel, » liy tekki « Yàlla ganesi na nu. » <p></p>",
          "24": "Noonu Yuusufa yeewu, yeggali jabaram, na ko ko malaakam <strong>Boorom bi*</strong> bi sante woon.",
          "25": "Waaye àndul ak moom, ba kera mu mucc, jur doom ju góor; mu tudde ko Yeesu. <p></p>",
          "NOTES":"...<p></p>",
          "*20, 22, 24": "Ay tekki yu biibël bi jëfandikoo nanu יְהֹוָה (YHWH), walla Yexowa (turu Yàlla), fii."
        }
      ]
    },
}

So, looks I need HTML. Anyone have another suggestion?


#6

You can fix that. You can write a program that takes what you have and turns it into what you want, and you can do all that outside of the app, so it won’t affect mobile performance. I think that is a much better idea than trying to hack something up in the app itself.


#7

Please try this.

itemTapped(event, item) {
		this.navCtrl.push(nextpage, {
		  item: item
		});
	}

Hope, this will solve your issue
Thanks,


#8

Hello Flycoders-sourav… even with this change nothing happens… I will share wit you my code:

chapter.td

...
constructor(public navCtrl: NavController, public navParams: NavParams, private http: Http) {
    this.book = navParams.get("book");
    this.bookChapter = navParams.get("bookChapter");
    this.http.get('assets/bible-books/'+this.book+'.json').map(res => res.json()).subscribe(data => {
      this.bookName = data.book;
      var chaptersData = data.chapters;
      for(let l=0;l<chaptersData.length;l++){
        if(chaptersData[l]["chapter"]==this.bookChapter){
          this.versesContents = chaptersData[l]["verses"][0];
          this.versesNumbers = Object.keys(chaptersData[l]["verses"][0]);
          break;
        }
      }

    });;
  }

glossary(event, word){
    this.navCtrl.push(GlossaryPage);
}
...

JSON

...
{
      "chapter": "2",
      "verses": [
        {
          "1": "Bi nga xamee ne Yeesu juddu na ci Betleyem ci diiwaanu Yude, amoon na ay boroom xam-xam, ñu jóge penku, ñëw <a href='#' (click)='glossary('Yersusalem')' class=glossary>Yerusalem</a>. Booba, ci jamonoy buur bi Erodd la woon.",
          "2": "...",
...

And, in my HTML

...
<span *ngFor="let verseNumber of versesNumbers" class="fontSize" [ngClass]="{small: fontSize===1, medium: fontSize===2, big: fontSize===3}">
      <a class=verseNumber (click)="changeVersion(bookName, bookChapter, verseNumber);" *ngIf="verseNumber!='1'">{{verseNumber}}</a>
      <a class=chapter *ngIf="verseNumber=='1'" (click)="changeVersion(bookName, bookChapter, verseNumber);">{{bookChapter}}</a>
      <span class=verse [innerHTML]=versesContents[verseNumber]></span>
  </span>
...

As you can see, the verse content from the JSON file is showed in the last line before . Even all HTML tags are showed correctly (as bold, italic, etc.), when I click in the word ‘Yersusalem’ nothing happens. Did you know how to make it works? Thanks again.


#9

I suggest checking out Proverbs 12:11. HTML is not your friend here. There is no magic bullet. Your loop is also incredibly inefficient. Please, reformat the data so that it is easily consumed by the app. That is completely free at runtime.


#10
glossary(event, word){
    this.navCtrl.push(GlossaryPage);
    book:book;
}

#11

Hello! Good shot, “one who works his ground will have plenty of bread; but one who runs after unpractical things lacks brains”… The thing is that it is my very first APP. I’m PHP developer since 2006 and this is my first contact with typescript and ionic. So, I really appreciate your help. I have read and read again both topics that you suggest me but I really don’t have a idea about how to do it with the Bible text… Can you give me an example about how it would be with just 1 bible verse? And what would be a good way to foreach verses?

Thank you!


#12

This thread contains some suggestions for structuring Bible data.


#13

Hello Rapropos. Thank you again. I have see your suggestion and it would be nice if there wasn’t one problem: this is a on going translation. For example: for some chapters, we have only portions of translation, just some verses, not all… For example: in some chapters we just have verses 1-9 and 12, 13 and 29. If there is no numerable index, how can I organize the verses and make a Synchronization? I already published a version of the APP in PlayStore… you can check it to have a example about what I want to do… Take a look in Macë 2… There is the verse that is with a word marked. (https://play.google.com/store/apps/details?id=br.com.wolof)

And I didn’t see, about the clickable words, a markdown example. The question is still the same: is it possible to have a link for another page in word inside a JSON long text? Even I don’t use HTML, is that possible? Have you a suggestion about it?


#14

Then I would just put “not yet translated” as a placeholder (or some other version that you do have) for the not-yet-translated verses.

Yes, if you use some sort of intermediate representation language:

[
{ flavor: "text", contents: "ordinary text" },
{ flavor: "link", contents: "clickable link", target: "url" },
{ flavor: "text", contents "more text" }
]

<ng-container *ngFor="let block of blocks">
<span *ngIf="block.flavor==='text'">{{block.contents}}</span>
<a *ngIf="block.flavor==='link'" [href]="block.target">{{block.contents}}</a>
</ng-container>

#15

Or perhaps Proverbs 12:15?


#16

Hello guys! I will try to follow your suggestion Rapropos… Mark, thanks for the counsel but I have not followed Rapropos counsel yet not because proud, but because I don’t understand so well Angular Sintaxe or ionic Framework yet… I come from a Web/PHP background… This is my very first APP and I’m learning and developing…

Rapropos, or anyone there, just more one doubt: how can I let my APP in Portuguese, for example… The “back button”, when I run my APP in a iOS devices is write “Back” and I would like that this button be write “Voltar” instead “Back”. I have changed the src/index.html

<html lang="pt-br" dir="ltr">

But the App still show “Back” instead voltar… How can I fix it?