How to wait for database transaction to complete it operation and return value in phonegap

Question

I am creating an app which fetch the data from the database on startup for that i want to create an js which will perform the database transaction and return the array element through which i will create the text-box and button etc.Know the problem is when I call the function on the onload like elementArray=fetchdata(); and then db.transaction in js will fetch the data from the database and return and array but when i call the function in js it call the function and start execution but does not wait for the db.transaction to complete and starts futher execution.I want to wait untill db.transaction complete its operation and then execute further operation. here is the dynamic_form.js file i create to fetch the data from the database:

var elementArray=new Array();
function fetchdata(){
db.transaction(function(tx){
    tx.executeSql("Select * from contactTable",[],function(tx,results){
        for(var i=0;i<results.rows.length;i++){
            var element=new Object();
            element.Name=results.rows.item(i).name;
            element.Lastname=results.rows.item(i).last_name;
            element.Mobile=resulst.rows.item(i).mobile_no;
            // ****and so on***//
            elementArray[i]=element;
        }
        return elementArray;
    });
});}

here is the code in the html file it loads the js file :

function dbTranscation()
    {
        console.log("$ function");
        var elementArray=fetchdata();
                       // after this it sould call this function
          createfield();

    }

Answer 1

With callback:

var elementArray=new Array();
function fetchdata(callback){
db.transaction(function(tx){
    tx.executeSql("Select * from contactTable",[],function(tx,results){
        for(var i=0;i<results.rows.length;i++){
            var element=new Object();
            element.Name=results.rows.item(i).name;
            element.Lastname=results.rows.item(i).last_name;
            element.Mobile=resulst.rows.item(i).mobile_no;
            // ****and so on***//
            elementArray[i]=element;
        }
        callback(elementArray);
    });
});}

function dbTranscation()
{
        console.log("$ function");
        fetchdata(createfield);

}

// another function 
function createfield(elementArray)
{ 
   // some logic 
};

Answer 2

var elementArray=new Array();
function fetchdata(callbackFN){
db.transaction(function(tx){
    tx.executeSql("Select * from contactTable",[],function(tx,results){
        for(var i=0;i<results.rows.length;i++){
            var element=new Object();
            element.Name=results.rows.item(i).name;
            element.Lastname=results.rows.item(i).last_name;
            element.Mobile=resulst.rows.item(i).mobile_no;
            // ****and so on***//
            elementArray[i]=element;
        }
        callbackFN();
    });
});}

// you can call function with call back

function dbTranscation() {
        console.log("$ function");        
        fetchdata(function (){
            createfield();    
        });
}

// you can define "fetchdata" function in globally and can access from any other pages