Forum | Appery.io

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

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

just what i was looking for!

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,

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.

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?

Hello Danny,

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

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,

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

Hi Sergiy,

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

Thanks.

Regards,