JS Macro code for HTTP GET method and retrieve JSON

[Ayesha]

I'm using empty.html downloaded 2 days ago on Windows 10. The following is my problem.

• Input  in Tiddler:  <<Q "2:2">> /* Macro call for Quran chapter 2 verse 2 */
• Current Output: http://api.alquran.cloud/v1/ayah/2:2/en.asad
• Desired Output: "This is the Book - wherein there be no doubt about it is [meant to be] a guidance for all the God-conscious." (The actual verse 2:2 instead of just the link)

I am using the following code adapted from Tobias Beer's sample in my Macro.

(function(){ "use strict";

exports.name = "Q"; 

exports.params = [ { name: "input" } ]; 

exports.run = function(input) { 

 var url = "http://api.alquran.cloud/v1/ayah/"+input+"/en.asad"; 

 return url; }; })();

How can I convert the following HTML code (which can display the verse but not practical in the Tiddler) into Javascript Macro code above to display the actual verse instead of just the link:

async function f() { 

let response = await fetch("http://api.alquran.cloud/v1/ayah/2:2/en.asad"); 

let json = await response.json();

let translation = await json['data'].text; 

}

The sample site at https://qoran.netlify.app/. 

Thank you and appreciate the help.

[Javier Eduardo Rojas Romero]

On Fri, May 21, 2021 at 01:09:44AM -0700, Ayesha wrote:
> - Input in Tiddler: <<Q "2:2">> /* Macro call for Quran chapter 2
> verse 2 */
> - Current Output: http://api.alquran.cloud/v1/ayah/2:2/en.asad
> - Desired Output: "This is the Book - wherein there be no doubt about it

> is [meant to be] a guidance for all the God-conscious." (The actual
> verse 2:2 instead of just the link)
>
> I am using the following code adapted from Tobias Beer's sample in my Macro.

Hello,

I could not find the sample from Tobias Beer that you are referring to.
Would you mind sharing it here, to have a better look at it and see how
it can be applied to your problem? For what is worth, I've been playing
a bit with getting tiddlywiki to issue HTTP requests elsewhere, and I'm
curious about example code from somebody else...

Cheers,

--
Javier

[Ayesha]

Hi Javier,

This is the link to Tobias Beer's sample that I have mentioned: https://tobibeer.github.io/tw/enable-js/#script 

As for my problem, @saqimtiaz has solved it here at Reddit. However, there is still a glitch as it works locally and not online (Netlify & TiddlyHost).

Thanks,

Ayesha.

[TW Tones]

Ayesha

As a rule you should not need to be using Javascript to achieve this but wikitext, widgets and macros as needed.

Far more people here can help you do that in native tiddlywiki. First you need to share how you are storing the actual verse including how you indicate it is 2:2

How you store the verses depends on if you imported the whole Quran or just this verse. You will want to optimise the whole process, not just the way to lookup a verse.

I caution against reverting to javascript in tiddlywiki when native tiddlywiki can do almost anything, you will have less dependencies and more reliable, sharable content.

"To a man with a hammer everything looks like a nail", looks like javascript is your hammer.

Yours respectfully

Tones

[Javier Eduardo Rojas Romero]

Dear Tones,

Ayesha hasn't imported the data into tiddlywiki ---as you seem to
imply---, but wants to request it from a remote API, via HTTP, get the
response to that request, and render the content of the response into a
tiddler.

On Tue, Jun 01, 2021 at 05:03:11PM -0700, TW Tones wrote:
>
> Ayesha
>
> As a rule you should not need to be using Javascript to achieve this but
> wikitext, widgets and macros as needed.
>
> Far more people here can help you do that in native tiddlywiki. First you
> need to share how you are storing the actual verse including how you
> indicate it is 2:2
> How you store the verses depends on if you imported the whole Quran or just
> this verse. You will want to optimise the whole process, not just the way
> to lookup a verse.
>
> I caution against reverting to javascript in tiddlywiki when native
> tiddlywiki can do almost anything, you will have less dependencies and more
> reliable, sharable content.
>
> "To a man with a hammer everything looks like a nail", looks like
> javascript is your hammer.
>
> Yours respectfully
> Tones
>
> On Tuesday, 1 June 2021 at 16:40:17 UTC+10 Ayesha wrote:
>
> > Hi Javier,
> >
> > This is the link to Tobias Beer's sample that I have mentioned:
> > https://tobibeer.github.io/tw/enable-js/#script
> > <https://tobibeer.github.io/tw/enable-js/#script>
> >
> > As for my problem, @saqimtiaz has solved it here at Reddit

> > <https://www.reddit.com/r/TiddlyWiki5/comments/nhngcn/js_macro/?utm_source=share&utm_medium=web2x&context=3>.

> > However, there is still a glitch as it works locally and not online
> > (Netlify & TiddlyHost).
> >
> > Thanks,
> >
> > Ayesha.
> >
> > On Monday, May 24, 2021 at 5:04:28 AM UTC+8 Javier Rojas wrote:
> >
> >> On Fri, May 21, 2021 at 01:09:44AM -0700, Ayesha wrote:
> >> > - Input in Tiddler: <<Q "2:2">> /* Macro call for Quran chapter 2
> >> > verse 2 */
> >> > - Current Output: http://api.alquran.cloud/v1/ayah/2:2/en.asad
> >> > - Desired Output: "This is the Book - wherein there be no doubt about
> >> it
> >> > is [meant to be] a guidance for all the God-conscious." (The actual
> >> > verse 2:2 instead of just the link)
> >> >
> >> > I am using the following code adapted from Tobias Beer's sample in my
> >> Macro.
> >>
> >> Hello,
> >>
> >> I could not find the sample from Tobias Beer that you are referring to.
> >> Would you mind sharing it here, to have a better look at it and see how
> >> it can be applied to your problem? For what is worth, I've been playing
> >> a bit with getting tiddlywiki to issue HTTP requests elsewhere, and I'm
> >> curious about example code from somebody else...
> >>
> >> Cheers,
> >>
> >> --
> >> Javier
> >>
> >
>

> --
> You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
> To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/21bc39dc-04a3-4cec-8e73-a2ad43091509n%40googlegroups.com.

[TW Tones]

Javier,

First I believe this solution can be found without Javascript, or should be with a tweak.

Ah, believe it or not importing it is likely more difficult. In Ayesha's post it is said "How can I convert the following HTML code (which can display the verse but not practical in the Tiddler) into Javascript Macro code above to display the actual verse instead of just the link:"

To me if the content needs to be refactored, in many ways it needs to be "imported" not just displayed.

You can use html in tiddlers, to bring in external content to display out of the box. Using iframes and html object tag. For example you can import CSS. 

if you open the link http://api.alquran.cloud/v1/ayah/2:2/en.asad you can see the content is being returned in the browser.

I believe if that content is JSON or something else which needs further formatting you need to "import the content", so you can then process it in the wiki. Of course if the content was  static html it could be displayed directly.

I am confident a simpler way to bring and display this external content exists. Sure I cant express it very well.

A solution to this through wikitext and not bespoke Javascript is desirable for us all and future requirements.

Basically we are asking to use standards html links to reference external content, and in this case then have it interpreted rendered. In this example it needs to be converted from JSON to Wikitext and then rendered.

Yes I am trying to help outside my expertise.

Regards

Tones