Populating an image URL from a REST service

[steveharman]

Hi,

My app needs to connect to a REST service on page load and retrieve a PRODUCT_ID, for use populating an image control on an Appery page (so the image's URL would be something like http://www.mydomain.com/images/PRODUC... where PRODUCT_ID comes from the REST service).

I get how to retrieve the PRODUCT_ID from the REST service and keep it in a Local Storage Variable but am unclear how to interact with Appery in order to set the static part of the image URL (http://www.mydomain.com/images/) and append the dynamic PRODUCT_ID.jpg value

Is there a tutorial or can someone explain how & where in Appery we use JS to modify, in this case, image control properties in order to specify the image URL?

It would be really useful to have a general run-through on this - I'm sure "getting information from a REST service and modifying controls / components within Appery" is a major use of the product.

Many thanks,

Steve

[Kateryna Grynko]

Hi Steve,

When you map PRODUCT_ID to some component or localStorage variable you can add JavaScript code to process the result. PROJECT_ID value can be accessed from JS code as "value". That is, there you can convert PROJECT_ID to the desired URL and build it as an Image src-attribute.

If you process a list of such elements, map PROJECT_ID to Image component asset and add the following JavaScript code:
code$( element ).attr( "src", "http://domain.com/images/" + value + ".jpg" );/code

[Ram]

just what i was looking for!

[Danny Nguyen]

Hi Katya Yakusheva,

Can you walk me to the detail coding of the process the Procduct_ID plus the static desired URL. Also where do I add these codes?

Second, how to display the image?

Thanks,

Regards,

[Yurii Orishchuk]

Hi Danny.

It depends on your situation and app logic.

So please specify in details what do you want to implement to be clear.

Regards.

[Danny Nguyen]

Hi Yurii,

I am creating an Radio App.

I have created php for JSON script: http://www.hosannacc.org/hyvongradio/...

Every song will have an image of the Artist/Album.

I was able to query the Album's image name. What I need to add http://www.hyvongradio.com/album/####..., where ##### is the album_art image.

Second, how I can show the artist album image on the app for every song when it comes up?

[Evgene Karachevtsev]

Hello Danny,

You should use component Image, and add the js in the mapping http://devcenter.appery.io/documentat...

[Danny Nguyen]

HI Evgene,

I'm newbie so, I'm not sure how to capture JSON element and add the static http://www.mywebsite.com to the "img src= "

e.g.

"img src = "http://www.mywebsite.com/album-art/##..." where ##### is dynamic.

I appreciate, If you can help in coding this in JS

Thanks,

Regards,

[Serhii Kulibaba]

Hello Danny,

Use mapping to image:

where parameter "a" should has value ##### as you wrote;

and add JS:

prereturn "http://www.mywebsite.com/album-art/" + value;/pre

[Danny Nguyen]

Hi Sergiy,

Thanks for your help. An other question is that, how do I refresh the image for new songs?

Thanks.

Regards,