I am using a SQLite database in my PhoneGap application. I am able to populate the database, extract the database and also print it using console.log

Here is the code

function extractFromDB(){
     var db = window.openDatabase("hospitalsDB", "1.0", "HospitalsDB", false);
     db.transaction(queryDB, errorCB);
}

  function queryDB(tx) {
     tx.executeSql('SELECT * FROM hospitals', [], querySuccess, errorCB);
 }

 function querySuccess(tx, results) {
     var len = results.rows.length;
     console.log("DEMO table: " + len + " rows found.");
     for (var i=0; i<len; i++){
            console.log("Row = " + i + " ID = " + results.rows.item(i).id + " Data =  " + results.rows.item(i).data);
      }
}

My question is, how do I print this data onto the html page ?

I am using a SQLite database in my PhoneGap application. I am able to populate the database, extract the database and also print it using console.log

Here is the code

function extractFromDB(){
     var db = window.openDatabase("hospitalsDB", "1.0", "HospitalsDB", false);
     db.transaction(queryDB, errorCB);
}

  function queryDB(tx) {
     tx.executeSql('SELECT * FROM hospitals', [], querySuccess, errorCB);
 }

 function querySuccess(tx, results) {
     var len = results.rows.length;
     console.log("DEMO table: " + len + " rows found.");
     for (var i=0; i<len; i++){
            console.log("Row = " + i + " ID = " + results.rows.item(i).id + " Data =  " + results.rows.item(i).data);
      }
}

My question is, how do I print this data onto the html page ?

• javascript
• html
• sqlite
• cordova

Share Improve this question Follow asked Mar 24, 2013 at 0:03 Ashish AgarwalAshish Agarwal 14.9k3131 gold badges8888 silver badges126126 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

If i get your question in right way.Assume you have a <div> in your html page:

var resultDiv = $('#mydiv');
var data = undefined;
for (var i=0; i<len; i++){
     data = "Row = " + i + " ID = " + results.rows.item(i).id + " Data =  " + results.rows.item(i).data;
     resultDiv.append(data + "<br>")

This will write all the data into a div in your html page. A simple example smilar to your one: JSFIDDLE

function querySuccess(tx, results) {
  <!-- its good programming to check the length of rows returned by sqlite DB.-->
     var htmlstring = "";
         if (results != null && results.rows != null && results.rows.length > 0) {
                for ( var i = 0;i <results.rows.length;i++)
                    {
    htmlstring+= '<div class="ui-grid-a">';
          htmlstring += '<div class="ui-block-a">'+results.rows.item(i).id+'</div>'; 
           htmlstring+= '</div>';  

                   }

$("#divholderfordata").empty().append(htmlstring).trigger('create');

          }
   else
 {console.log("no records inserted in DB");}
}

where you can define "div" with id "divholderfordata" in your html code this code will work better as far as "UI" is concerned because it also includes "jquery-mobile" code hope it will help you.