How to display data to HTML using javascript

Question

I have a problem for displaying the data to HTML using javascript. The code that i create only display the latest data instead of the whole data. I use phonegap in my development. Here is the code:

 var oldHtml = document.getElementById("favorite-table-id").innerHTML;

 for(var i=0; i<courseIdResult.length;i++) {
    //var idResult = courseIdResult[i];
    db.transaction(
            function(tx) {
                var query='SELECT Title,Institution_Id,FullTime,EntryScore,Prerequisites FROM Course WHERE Id='+courseIdResult[i];
                tx.executeSql(query,[],function(tx,resultSet) {
                    console.log("Test 0");
                    var row = resultSet.rows.item(0);
                    var newHTML = "<tr> <td> <table> <tr> <td width=1% style='white-space:nowrap;font-weight:bold' align='left'>" +row['Title']+"-"+row['Institution_Id'] +
                      "</td> <td align='right' style='vertical-align:middle;' rowspan=2> <a href='#'><span class='glyphicon glyphicon-star'></span></a> </td></tr> <tr> <td width=1% style='white-space:nowrap'>" +
                      "Years:"+row['FullTime']+ "  ATAR:"+row['EntryScore']+ "  Prereq:"+row['Prerequisites']+ 
                      "</td> </tr> </table> </td> </tr>";
                    document.getElementById("favorite-table-id").innerHTML= oldHtml + newHTML;
                },errorCB);
            },errorCB
        );
}

variable courseIdResult is an ID for my query and i am using loop to get the data. However, everytime the loop progress, the value of document.getElementById("favorite-table-id").innerHTML is always overwrite. Please help me to solve this problem.

Thank you

You're setting oldHtml outside the for loop, so oldHtml is probably the empty string. You're also spawning (potentially) many queries. Try reworking the code to execute only one query, and iterate through the resultSet. — Jordan P
– Jordan P, Commented Dec 20, 2013 at 8:06
I try to execute with only one query however the database design is mess so i need twice execution to fetch the data. The first query execution resulted in comma(,) separate value: 1,2,3,4,5,6. I need to split this value to look other table in DB. I only spawn 2 queries. — haryadi87
– haryadi87, Commented Dec 20, 2013 at 10:31
do you want to fetch value like Select * From table where xxx in ('1','2') — Rohit Tiwari
– Rohit Tiwari, Commented Dec 20, 2013 at 10:38

Rohit Tiwari · Accepted Answer · 2013-12-20 11:39:20Z

4

var q = "";
for (var i = 0; i < courseIdResult.length; i++) {
    q += (q == "" ? "" : ", ") + "?";
}
var query = 'SELECT Title,Institution_Id,FullTime,EntryScore,Prerequisites FROM Course WHERE Id IN (' + q + ')';
var db = CreateDB();
var row = '';
db.transaction(populateDB, errorDB, successDB);
function populateDB(tx) {
    tx.executeSql(query, courseIdResult, function (tx, results) {
        var len = results.rows.length;
        var arrSectionTableName = [];
        if (len > 0) {
            $("#favorite-table-id").empty();
            var newHTML = "";
            for (var i = 0; i < len; i++) {
                 newHTML += "<tr> <td> <table> <tr> <td width=1% style='white-space:nowrap;font-weight:bold' align='left'>" +row['Title']+"-"+row['Institution_Id'] +
                  "</td> <td align='right' style='vertical-align:middle;' rowspan=2> <a href='#'><span class='glyphicon glyphicon-star'></span></a> </td></tr> <tr> <td width=1% style='white-space:nowrap'>" +
                  "Years:"+row['FullTime']+ "  ATAR:"+row['EntryScore']+ "  Prereq:"+row['Prerequisites']+ 
                  "</td> </tr> </table> </td> </tr>";
            }
            $('#"favorite-table-id"').val(newHTML);
           //Refresh your control,eg if it is a listview
            $('#favorite-table-id').listview('refresh');
        }
    });
}
function errorDB(err) {
    alert("Error processing SQL " + err.message);
}
function successDB() {

}

edited Dec 20, 2013 at 11:39

answered Dec 20, 2013 at 8:06

Rohit Tiwari

8225 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

haryadi87 Over a year ago

The "+=" is work to display whole data however the HTML still display the latest data with many rows. How should i define the variable to make it correct ?

Ashish · Accepted Answer · 2013-12-20 08:38:43Z

append your old html to new hTML before inserting the HTML content in place holder.

var oldHtml = document.getElementById("favorite-table-id").innerHTML;

 for(var i=0; i<courseIdResult.length;i++) {
//var idResult = courseIdResult[i];
db.transaction(
        function(tx) {
            var query='SELECT Title,Institution_Id,FullTime,EntryScore,Prerequisites FROM Course WHERE Id='+courseIdResult[i];
            tx.executeSql(query,[],function(tx,resultSet) {
                console.log("Test 0");
                var row = resultSet.rows.item(0);
                var newHTML = oldHtml + "<tr> <td> <table> <tr> <td width=1% style='white-space:nowrap;font-weight:bold' align='left'>" +row['Title']+"-"+row['Institution_Id'] +
                  "</td> <td align='right' style='vertical-align:middle;' rowspan=2> <a href='#'><span class='glyphicon glyphicon-star'></span></a> </td></tr> <tr> <td width=1% style='white-space:nowrap'>" +
                  "Years:"+row['FullTime']+ "  ATAR:"+row['EntryScore']+ "  Prereq:"+row['Prerequisites']+ 
                  "</td> </tr> </table> </td> </tr>";
                document.getElementById("favorite-table-id").innerHTML= newHTML;
            },errorCB);
        },errorCB
    );

}

Collectives™ on Stack Overflow

How to display data to HTML using javascript

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related