Retrieving multiple Rows from database using javascript and display in an html table

Question

I am trying to display the database values in a html table using javascript but i am getting only the last value in the database table

function productValues() {
  if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
    var responseJson= JSON.parse(xmlHttp.responseText);
    var length=responseJson.a1.length;
    document.getElementById("nid").value="";
    document.getElementById("pid").value="";
    document.getElementById("cid").value="";
    document.getElementById("name").value="";
    document.getElementById("price").value="";
    for(i=0;i<length;i++){
      var a=responseJson.a1[i];
      var b=responseJson.a2[i];
      var c=responseJson.a3[i];
      var d=responseJson.a4[i];
      var e=responseJson.a5[i];
      document.getElementById("nid").value=a;
      document.getElementById("pid").value=b;
      document.getElementById("cid").value=c;
      document.getElementById("name").value=d;
      document.getElementById("price").value=e;
    }
  }
}

//response

ProductSearch prod=new ProductSearch();
            prod.setA1(a1);
            prod.setA2(a2);
            prod.setA3(a3);
            prod.setA4(a4);
            prod.setA5(a5);

            String responseJson = new Gson().toJson(prod);

//html code

</head>
<form id="form1"  method="post" action="ProductNameSearchF">



                            <table  align="center">   
                                <tr>
                                    <td><font color="#006400"><b> Select Item:</b></font>
                                        <input type="text" name="searchname"  id="user" onclick="clearFields()"/>
<input type="button" id="submit" style=" color:#280000 ;font-size: medium;" value="Edit" onclick="getDetails();" />

<tr>

<br/></td></tr>

<div id="welcometext" align="center">
</div>
                            </table>

<TABLE cellpadding="8"  id ="table" border="1" align="center" style="background-color: #EEEEEE;">


<TR bgcolor="#66CCFF"><font color="#fff">
<TD color="#0080FF" width="0.1%" ><B>Id</B></TD>
<TD color="#0080FF" width="0.5%"><B>ProductType_Id</B></TD>
<TD width="0.1%"><B>Cuisine_Id</B></TD></font>
<TD width="0.5%"><B>Name</B></TD></font>
<TD width="0.5%"><B>Price</B></TD></font>
</TR>


<TR>
  <TD><input type="text"  name="id" id="nid"  style="background-color:transparent; color:blue; " readonly   ></TD>
<TD><input type="text"  name="productid" id="pid"  style="background-color:transparent; color:red; " ></TD>

<TD><b><input type="text"  name="cuisineid" id="cid" style="background-color:transparent; color:red; "   ></b></TD>
<TD><b><input type="text"  name="name" id="name" style="background-color:transparent; color:red; "></b></TD>
<TD><b><input type="text"  name="price" id="price" style="background-color:transparent; color:red;" ></b></TD></input>
</TR>




</font>
<font size="+3" color="red"></b>



</font>

<TR>

</tr>
</TABLE>

<table align="center">
    <tr>
     <td colspan="">  <a href="SearchFirstNameClear.jsp" style="text-color: #ffffcc;"><img src="clear.jpg" width="50" height="30" ></img></a> <button type="submit"  name="someName" value="someValue"><img src="redsubmit.png" width="70" height="30" ></button>  </td>
    </tr>
</table>
</table>



</form>

Here is my html code , i am adding only the essntial code of the html page

ProductSearch prod=new ProductSearch(); prod.setA1(a1); prod.setA2(a2); prod.setA3(a3); prod.setA4(a4); prod.setA5(a5); String responseJson = new Gson().toJson(prod); — user3825041
– user3825041, Commented Jul 1, 2015 at 6:23
Could you edit the original post to include a sample JSON object? — Colin Burr
– Colin Burr, Commented Jul 1, 2015 at 6:25
@user3825041 your setting the values to your ids inside of for loop, which will resets yours values. thats why your getting only last row values in your html page, could you include your html table? — Srinu Chinka
– Srinu Chinka, Commented Jul 1, 2015 at 6:37

sach · Accepted Answer · 2015-07-01 07:05:56Z

2

@user3825041: In Html elements id a are unique in nature. I mean if we you repeatedly set same ids with different values, at the end you will have single value(i.e is the last one) updated. Due to which you are getting only last value. Please try to change ids with each row update.

Or else you can use html table plugins like bootstrap table which are easy and responsive to use. You just need to provide data(JSON/XML format) to these plugins.

http://getbootstrap.com/css/#tables

answered Jul 1, 2015 at 7:05

sach

2711 silver badge7 bronze badges

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

Comments

Naman · Accepted Answer · 2015-07-01 10:48:34Z

You can generate table dynamically from javascript, to achieve it your (servlet) response should be like:

ArrayList<ProductSearch> al = new ArrayList<ProductSearch>();

... databse code ...

while(rs.next()) {
    ProductSearch prod=new ProductSearch();
    prod.setA1(a1);
    prod.setA2(a2);
    prod.setA3(a3);
    prod.setA4(a4);
    prod.setA5(a5);

    al.add(prod);
}
...
String responseJson = new Gson().toJson(al);
response.getWriter().println(responseJson);

And your html should be like:

<input type="button" value="Show Results" onclick="showTable()" />
<div id="dvTable"></div>

<script type="text/javascript">
    function showTable() {
            if (xmlHttp.readyState == 4) {  
                var responseJson = JSON.parse(xmlHttp.responseText);
                var table = document.createElement("TABLE");
                table.border = "1";

                var row = table.insertRow(-1);

                var headerCell = document.createElement("TH");
                headerCell.innerHTML = "nid";
                row.appendChild(headerCell);
                var headerCell = document.createElement("TH");
                headerCell.innerHTML = "pid";
                row.appendChild(headerCell);
                var headerCell = document.createElement("TH");
                headerCell.innerHTML = "cid";
                row.appendChild(headerCell);
                var headerCell = document.createElement("TH");
                headerCell.innerHTML = "name";
                row.appendChild(headerCell);
                var headerCell = document.createElement("TH");
                headerCell.innerHTML = "price";
                row.appendChild(headerCell);

                for (var i = 0; i < responseJson.length; i++) {
                    row = table.insertRow(-1); //creates new row
                    row.id = "row1"; // if you want to set id of row
                    var cell = row.insertCell(-1); // creates new column
                    cell.innerHTML = responseJson[i].a1; // put data in column
                    cell.id = "column1"; // if you want to set id of column
                    var cell = row.insertCell(-1);
                    cell.innerHTML = responseJson[i].a2;
                    var cell = row.insertCell(-1);
                    cell.innerHTML = responseJson[i].a3;
                    var cell = row.insertCell(-1);
                    cell.innerHTML = responseJson[i].a4;
                    var cell = row.insertCell(-1);
                    cell.innerHTML = responseJson[i].a5;
                }

                var dvTable = document.getElementById("dvTable");
                dvTable.innerHTML = "";
                dvTable.appendChild(table);
            }     
    }
</script>

Collectives™ on Stack Overflow

Retrieving multiple Rows from database using javascript and display in an html table

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related