ibm mobilefirst - How to retrieve images from existing database using sql/http adapter from worklight application

Question

I'm having an existing database and i have to show the list of images in my worklight application to user so that they can select and adds to cart.

The image column in database is having only path of images at server. i.e "memory/toppings/nuts/hazelnuts.jpg" "memory/toppings/nuts/macadamia_nuts.jpg"

so how to get all these images and show on my worklight application.

Answer 1

What you should do is concatenate the server URL and the image path after you retrieve it from the database.

Lets say in the database I store this: "/uploads/original/6/63935/1570735-master_chief.jpg", so the concatenation would be like this:

var url = "http://static.comicvine.com" + response.invocationResult.resultSet[0].profileimg;
$("#img1").attr("src", url);

Below is a working example.

Upon clicking a button, a SQL adapter procedure is invoked and returns a URL stored in the database. This URL is inserted into a pre-existing img tag's src attribute, which then gets displayed.

You need to take this implementation and alter it to fit your needs.

HTML:

<input type="button" value="insert image" onclick="getImageURL();"/><br>
<img id="img1" src=""/>

JS:

function getImageURL() {
    var invocationData = {
            adapter : 'retrieveImage',
            procedure : 'retrieveImageURL',
            parameters : []
    };

    WL.Client.invokeProcedure(invocationData,{
        onSuccess : retrieveSuccess,
        onFailure : retrieveFailure,
    });
}

function retrieveSuccess(response) {
    var url = "http://static.comicvine.com" + response.invocationResult.resultSet[0].profileimg;
    $("#img1").attr("src", url);
}

function retrieveFailure() {
    alert ("failure");
}

Alternate JS:
This code snippet shows how to add several images into dynamically created img tags.

function retrieveSuccess(response) {
    var url, i;
    for (i = 0; i < response.invocationResult.resultSet.length; i++) {
        url = "http://static.comicvine.com" + response.invocationResult.resultSet[i].profileimg;
        $("#imgholder").append("<li><img src='" + url + "'/></li>");
        // imgholder is a UL in the HTML where the img tags will be appended to.
    };
}

Adapter JS:

var procedure1Statement = WL.Server.createSQLStatement("select profileimg from users");
function retrieveImageURL() {
    return WL.Server.invokeSQLStatement({
        preparedStatement : procedure1Statement
    });
}

Adapter XML:

<procedure name="retrieveImageURL"/>

In the database:

table (users)
|
-- column (profileimg)
------ row contents: some URL pointing to an image, for example: /myimg.png