Forum | Appery.io

Hi,
I am invoking a web service which returns JSON and one one of the objects is a base64 encoded image. I want to map this returned value to the variable which I will then use later on the page to display the image.
How would I go about doing this?
Here is a sample of what gets returned from the web service call:
{
"ns1:name": "productImage",
"ns1:value": "/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBg8ODQ0MDxAPDw0PDQ8MDw0NDw4NDQwNFBAVFBQQFBIXGyYeFxklGRQUHzAgIycqLS4sFR4xNTAqNScrLCkBCQoKDgwNFA8PFCkYFBwpKSk1LCkpKSkpLCkpLCkpKSkpKSkpKSkpKSksKSkvKSkpKSkpKSkpKSkpKSkpKSkpKf/AABEIAP4AxgMBIgACEQEDEQH/xAAbAAACAwEBAQAAAAAAAAAAAAAAAQIDBAUGB//EAEIQAAIBAgQCBQgGCQMFAAAAAAECAAMRBBITIQUxBiJBUWEycXKBkaGxwRQzktHh8BUWI0JSU2KCogdDsiRjc4Px/8QAGQEBAQEBAQEAAAAAAAAAAAAAAAECAwQF/8QAJhEBAQACAAILAQEAAAAAAAAAAAECEQMxBBIUFSEyQVFxgaFSE//aAAwDAQACEQMRAD8A4uSGSadKGlCs+SGSaNOGnAz5IZJo04acDPkhkmjShpwM+SLJNWnDTgZckMk1aUWnAzZIZJp0oaUDNkhkmnSi0oGbJDJNOnDTkGXJDJNOnDTgZskWSatOLTlGbJFkmrTi0oGbJCadKEDfpQ0pt0oaUDFpQ0pt0YaMDFpR6U2aM38F4atasEbyQpYjvtbb3wORRwTubIrMe5QTOnQ6JYh9yqoP6m+689vh8Cq2ygCwtYDq+7lNIod9/VM7XTxadCW/eqqPMpPzl6dCE7arHzKBPW6A8ZLL4Sbq6eVHQmj2vVP2B8o/1LofxVfan3T05X82hl/O4jdNR5j9S8P/ABVfan3SDdCqN7B6v+H3T1BW/OxgEH/wCN01Hk36EJ2VmHnRT85S/Qdv3ayH0kZfmZ7Egytjfaw852jZp4it0NxK8gj+g+/vtOZieFVaX1lNl8SNvbyn0gee/mEjW3UqRcEW63L2S7TT5jow0Z6XjXDKajOgAN7EDYHxtORoyow6MWjN+jFowMOlFozfoxaMDDowm7RhA3aMejNmlDSlVj0YaM26UNKEY9GdPo9TtXJ/7bfESjSnQ4Klqv8AY3xEl5DuBpMViO0yFoTm2u+lN+QIvpXgPZKSJEwLziv6REcUP4R298zn74m7fXA0HFDuHv7pA4v+ke+UH5/KR/D4QLzi/wClezskDiz3D2DulP4fCRPy+UCx8Ux7ZneoZJh+fXK2EIwcSF0PnE5OjO3i1uvrExaU3EYdKGjNulDSlRh0YaM26UNKUYtGObNKEK1acenNGnDThGfThpzTpw04GfTmvhaWqf2n5SGnNOASz+oyUdGEllhkM5toGQMsIkDAifvkW++TI+cTD5wIH5/KR/D4SZH59Uj+HwgQ/D4SB/Psln4fCQP59kIi0raWsPn85WyyjNWFx65TpzUUhpzUZrLpxac1acNOUZdOGnNWnFpwM2nCadOEouyR5ZblhlkFWSPJLMseWBVkk6TZTeSywywNDY+mouxyi4HW5X9U..."
}

Thank you in advance.

Hello,

At first you should make correct response parameters(manually or automatically).
Details: http://prntscr.com/63mvzd/direct

Then you need to add datasource of this service on the page and click "success" event handler "mapping" action. And link needed data(in your case "ns1:value" to some storage).

Also you should add this storage before.
Details: http://devcenter.appery.io/documentat...

Regards.

Yurii,
thank you for your swift response.
I think I was a bit unclear in my question prerequisites... I already completed the response structure and the mapping on successful web service call, where I am stuck is:
a) storage only allows me to choose between the string, number and boolean type and I am guessing in my case I would want string
b) once the return value is stored in the variable (of type string) how do I use that variable on the page to display the image? would I have to use JS to convert the string to image? In android native code (java) I use this syntax to accomplish the task:
InputStream stream = new ByteArrayInputStream(Base64.decode(input.getBytes(), Base64.DEFAULT));
Bitmap bitmap = BitmapFactory.decodeStream(stream);
return bitmap;

Hello,

Okay the problem how to display content coded with base64 in image component..

In this case please follow these steps:

1. Open mapping.

2. Link storage/response_parameter that contains base64 string of the image file to image component asset property.

3. Click "JS" on this link.

4. Populate with following JS code:

   pre

   return "data:image/png;base64," + value;

   /pre

   See details on screen shot: http://prntscr.com/641477/direct

   Note: this code will work with "image/png" file type.

   Regards.

Yurii,
that makes sense however there is no option for me to choose base64image as a type in the storage???
Here is what I see as options, please advise how to get base64image type:

X Yz,

Base64 represents binary data in an ASCII string format you can see it here http://en.wikipedia.org/wiki/Base64. So it's OK to use STRING type for base64image