CODEWITHSUNDEEP
htmljsonajax
Glyn
Glyn

Reputation: 1995

Add a table row from JSON input

I am trying to add a row to a HTML table from JSON input using AJAX. I only want specific columns added. I am able to get the table to show; however the rows are not added.

Please see below for the HTML and AJAX (with the returned JSON).

HTML:

<html>

  <head>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
    <script src="js/table2excel.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="js/tableTest.js"></script>
  </head>

  <body>
    <p><button id="btn-export">Export</button></p>
    <table id="example" class="display" cellspacing="0" width="100%">

      <thead>
        <tr>
          <th>Activity Name</th>
          <th>Start Date</th>
          <th>End Date</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td id='adActivityName'></td>
          <td id='adStartDate'></td>
          <td id='adEndDate'></td>
        </tr>
      </tbody>
    </table>

  </body>

</html>

AJAX (with JSON):

function e1ActivitySelect() {
    var dataToBeSent  = {
            ssAccountLevel : sessionStorage.getItem('ssAccountLevel'),
            ssAccountID : sessionStorage.getItem('ssAccountID'),
            ssArchived : sessionStorage.getItem('ssArchived'),
    };

    $.ajax({
        url: "E1ActivitySelectView",
        data : dataToBeSent,
        type: "POST",
        cache: false
    })
    .fail (function(jqXHR, textStatus, errorThrown) {
         $('#ajaxGetUserServletResponse').text('An error occured getting the Activity information.');
    })
    .done(function(responseJson1a) {
        dataType: "json";
//      alert(JSON.stringify(responseJson1a));
//  [{"adId":"2","grpId":"2","adActivityID":"2","adActivityName":"Visit Ryde Fire Station","adStartDate":"2017-05-24","adEndDate":"2017-05-24"}]
    for (i=0; i < responseJson1a.length; i++) {
        $('#adActivityName').append("<td>"+a[i].adActivityName+"</td>");
        $('#adStartDate').append("<td>"+a[i].adStartDate+"</td>");
        $('#adEndDate').append("<td>"+a[i].adEndDate+"</td>");
    }
    });
}

enter image description here

Upvotes: 0

Views: 133

Answers (1)

Ajith
Ajith

Reputation: 258

You are Not appending table rows in a proper way

When you have multiple rows to append you need to create multiple row tags and append the data like this

HTML: 

  <table id="example" class="display" cellspacing="0" width="100%">
     <thead>
        <tr>
          <th>Activity Name</th>
          <th>Start Date</th>
          <th>End Date</th>
        </tr>
     </thead>
     <tbody id="mytablebody">

     </tbody>
  </table>

Javascript:

function e1ActivitySelect() {
    var dataToBeSent  = {
        ssAccountLevel : sessionStorage.getItem('ssAccountLevel'),
        ssAccountID : sessionStorage.getItem('ssAccountID'),
        ssArchived : sessionStorage.getItem('ssArchived'),
    };

    $.ajax({
        url: "E1ActivitySelectView",
        data : dataToBeSent,
        type: "POST",
        cache: false
    })
    .fail (function(jqXHR, textStatus, errorThrown) {
         $('#ajaxGetUserServletResponse').text('An error occured getting the Activity 
           information.');
    })
    .done(function(responseJson1a) {
        var tablebody = "";
        try{
           for (i=0; i < responseJson1a.length; i++) {
               tablebody += "<tr><td>"+responseJson1a[i].adActivityName+"</td><td>"++responseJson1a[i].adStartDate+"</td><td>"++responseJson1a[i].adEndDate+"</td></tr>";
           }
           $("#mytablebody").empty();
           $("#mytablebody").append(tablebody);
        }
        catch(e){
           console.log(e);
        }
    });
}

Upvotes: 1

Related Questions