How to give java arraylist to javascript function using JSON

Question

I have a table which is created through javascript function which is as below

Now you can see the cell "VAT5.5" is empty.there i have to get the database values from SQL database and i have to keep those in a dropdown box.I am able to get the database values and store it in an arraylist.But the problem i am facing is to export that arraylist to the javascript function.I heard we can pass the arraylist values to the script function through JSON.So i tried to parse and sent those to javascript function but i didnt know the JSON code properly.So i am facing an error.

My code is as follows

<script language="javascript">
                    // Add row to the HTML table


                    function addRow() {    
                        var table = document.getElementById('my_table'); //html table
                        var rowCount = table.rows.length; //no. of rows in table
                        var columnCount =  table.rows[0].cells.length; //no. of columns in table          
                        var row = table.insertRow(rowCount); //insert a row            


                        var cell7 = row.insertCell(6);

                        var element7 =  document.createElement("select");
                        element7.setAttribute('multiple', '');
                        var optarr = document.getElementById('data').value;

                        for(var i = 0;i<optarr.length;i++)
                        { 
                         var opt = document.createElement("option");
                         opt.text = optarr[i];

                         opt.value = optarr[i];
                         opt.className = optarr[i];
                         element7.appendChild(opt);
                        } 


                       element7.setAttribute('id', 'vat5'); //set the id attribute 
                       element7.setAttribute('name','tax'+rowCount);
                       element7.setAttribute('value','vat5');

                       cell7.appendChild(element7);

                    }  
<%
            Connection con = null;
            ResultSet rs = null;
            ArrayList<String> ar=new ArrayList<String>();
            String taxgroup;


            try {
                 DBConnect db = new DBConnect();
                 con = db.getCon();
                 String sql = "select distinct TaxGroup from marketing_database.tax_info";
                 PreparedStatement smt = con.prepareStatement(sql);
                 rs = smt.executeQuery();

                 while(rs.next())
                 {
                     taxgroup=rs.getString(1);

                        ar.add(taxgroup);
                        System.out.println("Array is" +ar);
                 }
                 int size = ar.size();


                 System.out.println("size is" +size);

            %>
            <%
            con.close();
            smt.close();
            rs.close();

            }
            catch(SQLException ex){
                ex.printStackTrace();
              }

            %>

So how to get the above arralist to a javascript function.I hope i will get some help

Answer 1

<%
            Connection con = null;
            ResultSet rs = null;
            ArrayList<String> ar=new ArrayList<String>();
            String taxgroup;


            try {
                 DBConnect db = new DBConnect();
                 con = db.getCon();
                 String sql = "select distinct TaxGroup from marketing_database.tax_info";
                 PreparedStatement smt = con.prepareStatement(sql);
                 rs = smt.executeQuery();

                 while(rs.next())
                 {
                     taxgroup=rs.getString(1);

                        ar.add(taxgroup);
                        System.out.println("Array is" +ar);
                 }
                 int size = ar.size();


                 System.out.println("size is" +size);

            %>
            <%
            con.close();
            smt.close();
            rs.close();

            }
            catch(SQLException ex){
                ex.printStackTrace();
              }

            %>

 var cell7 = row.insertCell(6);

          var element7 =  document.createElement("select");
          element7.setAttribute('multiple', '');
          var jsArray = [];
          <%for(int i=0;i<ar.size();i++){%>
              jsArray.push("<%= ar.get(i)%>");
          <%}%>


         //   var optarr =  ["vat1","vat2","vat3","vat4","vat5","vat6","vat7","vat8","vat9"];
          alert(jsArray.length);
          alert(jsArray);
          for(var i = 0;i<jsArray.length;i++)
          { 
           var opt = document.createElement("option");
           opt.text = jsArray[i];

           opt.value = jsArray[i];
           opt.className = jsArray[i];
           element7.appendChild(opt);
          } 
element7.setAttribute('id', 'vat5'); //set the id attribute 
         element7.setAttribute('name','tax'+rowCount);
         element7.setAttribute('value','vat5');

         cell7.appendChild(element7);