To retrieve values dynamically in javascript

Question

I am working on a phone gap application,i want to retrieve data for an element say element id 1 has four values.I want to retrieve it from the sqllite database and set it on a slide view.

I have used the following code for the time being,I get the values,but for each and every element,I set the value separately,

    var instance= results.rows.length;
    for (var i=0; i<instance; i++)
    {
        cidinstance=results.rows.item(i).cid;
        var key=results.rows.item(i).key;
        var valueinstance=results.rows.item(i).value;
        console.log("cid= "+cidinstance +   "key= "+key);   
        console.log("cid= "+cidinstance +   "valueinstance= "+valueinstance);
    }
   if(val[1]==0) 
   {
        document.getElementById("s1cause").innerHTML=results.rows.item(0).value;
        document.getElementById("s2cause").innerHTML=results.rows.item(1).value;
        document.getElementById("s3cause").innerHTML=results.rows.item(2).value;
        document.getElementById("s4cause").innerHTML=results.rows.item(3).value;
        document.getElementById("s5cause").innerHTML=results.rows.item(4).value;
    }
    else if(val[1]==1)
    {
        document.getElementById("s1cause").innerHTML=results.rows.item(4).value;
        document.getElementById("s2cause").innerHTML=results.rows.item(5).value;
    }
    else if(val[1]==2)
    {
        document.getElementById("s1cause").innerHTML=results.rows.item(6).value;
        document.getElementById("s2cause").innerHTML=results.rows.item(7).value;
        document.getElementById("s3cause").innerHTML=results.rows.item(8).value;
    }

In this way,i set the values in a static way.i would like to get these values dynamically.

my database will look like this,in this format.

id  cid values

1   1   value1
2   1   value2
3   1   value3

Please guide me.How should I implement it?

In the mean time While waiting for your suggestions,i made some changes in the code and tried executing it.Here is the code i tried

value=val[1];
var causedetails = results.rows.length;
for (var i=value; i<causedetails; i++)
{
    cidinstance=results.rows.item(i).cid;
    console.log("cid= "+cidinstance );
    var valueinstance=results.rows.item(i).value;
    //document.getElementById("s1cause").innerHTML=valueinstance;
    console.log("cid= "+cidinstance  + "" + "valueinstance= "+valueinstance);
}

when val[1}=0,it worked perfectly all the values were printed.

The problem started from the following situation,when val[1]=1 or 2,....so on when val[1]=1,it actually has just 2 values.but when i printed it in the console log,1 value was seen after that i see an error

JSCallback: Message from Server:  SQLitePluginTransaction.queryCompleteCallback(value1,value2)--->(the 2 values that should have come in the console log).

Where is the mistake,please guide me.

console.log print out

when value=0

05-16 13:42:59.062: I/Web Console(10351): cid= 1 valueinstance= VALUE 1 of cid 1 at file:///android_asset/www/abc.html?var%20id=0:181

05-16 13:42:59.062: I/Web Console(10351): cid= 1 valueinstance= VALUE 2 of cid 1 at file:///android_asset/www/abc.html?var%20id=0:181

05-16 13:42:59.062: I/Web Console(10351): cid= 1 valueinstance= VALUE 3 of cid 1 at file:///android_asset/www/abc.html?var%20id=0:181

05-16 13:42:59.062: I/Web Console(10351): cid= 1 valueinstance= VALUE 4 of cid 1 at file:///android_asset/www/abc.html?var%20id=0:181

when value=1

05-16 13:49:36.765: I/Web Console(11184): cid= 2 valueinstance= VALUE 2 of cid 2 at file:///android_asset/www/abc.html?var%20id=0:181

05-16 13:49:36.769: I/Web Console(11184): JSCallback: Message from Server:  SQLitePluginTransaction.queryCompleteCallback('1368692376635000','1368692376639000', [{"value":"VALUE 1","id":"5","cid":"2"},{"value":"VALUE 2","id":"6","cid":"2"}]); at file:///android_asset/www/cordova-2.1.0.js:3726

SCRIPT in cordova2.1.js is

function startXhr() {
    // cordova/exec depends on this module, so we can't require cordova/exec on the module level.
    var exec = require('cordova/exec'),
    xmlhttp = new XMLHttpRequest();

    // Callback function when XMLHttpRequest is ready
    xmlhttp.onreadystatechange=function(){
        if (!xmlhttp) {
            return;
        }        
if (xmlhttp.readyState === 4){
                    // If callback has JavaScript statement to execute
                    if (xmlhttp.status === 200) {

                        // Need to url decode the response
                        var msg = decodeURIComponent(xmlhttp.responseText);
                        setTimeout(function() {
                            try {
                                var t = eval(msg);
                            }
                            catch (e) {
                                // If we're getting an error here, seeing the message will help in debugging
    LINE 3726==>                console.log("JSCallback: Message from Server: " + msg);
                                console.log("JSCallback Error: "+e);
                            }
                        }, 1);
                        setTimeout(startXhr, 1);
                    }

CAN SOMEONE HELP ME OUT WITH THIS???,PLEASE

Answer 1

You can use some function that will execute repeatable parts of code:

function setValues(count, offset) {
    var i;
    offset = offset || 0;
    for(i=0; i<count; i++) {
        document.getElementById("s"+(i+1)+"cause").innerHTML=results.rows.item(i+offset).value;
    }
}

The first argument of the function is the number of elements having id matching the pattern s<positive number>cause and the second parameter is the starting index in results.rows from which data should be retrieved.

Than your code will look like this:

if(val[1]===0) {
    setValues(5);
} else if(val[1]===1) {
    setValues(2,4);
} else if(val[1]===2) {
    setValues(3,6);
}