How do i load data to a table on dropdownchange using ajax

Question

$("#sel_gram").change(function(){
    var gramid = $(this).val();

    $.ajax({
        url: 'getBooth-details.php',
        type: 'post',
        data: {gram:gramid},
        dataType: 'json',

        success:function(response){

            var len = response.length; 

            for( var i = 0; i<len; i++){
                var id = response[i]['id'];
                var name = response[i]['name'];
                var booth_officer_name = response[i]['booth_officer_name']; 
                var booth_officer_contact = response[i]['booth_officer_contact'];               
            }
        }         
    });
});

I want to add this to a table that I have designed below the select options. I am getting all the data properly but I'm unable to use it in my table .

This is the table where i want to show the data.

<table class="table table-hover p-table">
                      <thead>
                      <tr>
                          <th>Booth Name</th>
                          <th>Booth Adhikari</th>
                          <th>Contact</th>

                          <th>Custom</th>
                      </tr>
                      </thead>
                      <tbody>
                      <tr>
                          <td class="p-name">
                              <h6 id="boothname">Name</h6>
                          </td>
                          <td class="p-team">
                             <h6 id="adhikariname"></h6>
                          </td>

                          <td>
                              <h6 id="adhikaricontact"></h6>
                          </td>
                          <td>
                              <a href="project_details.html" class="btn btn-primary btn-sm"><i class="fa fa-folder"></i> View </a>
                              <a href="#" class="btn btn-info btn-sm"><i class="fa fa-pencil"></i> Edit </a>
                              <a href="#" class="btn btn-danger btn-sm"><i class="fa fa-trash-o"></i> Delete </a>
                          </td>
                      </tr>

                      </tbody>
                  </table>

This is where i want my data to be displayed.. where on click of view i want to take user to next page with id of the booth show that i can show further details

Answer 1

You can append every row using += in some variable and then use .html() to append same row inside your <tbody> .

Demo Code :

//your response
var response = [{
  "id": "1",
  "name": "Booth First",
  "booth_officer_name": "First Adhikari",
  "booth_officer_contact": "9827198271",
  "gram_parshad_name": "Gram Officer One",
  "gram_parshad_contact": "1231231231",
  "gram_population": "10000",
  "gram_house_count": "106",
  "gram_voters_count": "8922",
  "gram_polling_both_count": "20",
  "zone_selected": "23",
  "sector_selected": "14",
  "panchayat_selected": "9",
  "gram_selected": "6",
  "zone_area": "dongargadh",
  "zone_region": "rural"
}];

var len = response.length;
var data = "";
for (var i = 0; i < len; i++) {

  //appeding each row inside <tr>
  data += '<tr><td class="p-name"><h6 id="boothname">' + response[i]['name'] + '</h6> </td><td class="p-team"> <h6 id="adhikariname">' + response[i]['booth_officer_name'] + '</h6></td> <td><h6 id="adhikaricontact">' + response[i]['booth_officer_contact'] + '</h6></td><td><a href="project_details.html" class="btn btn-primary btn-sm"><i class="fa fa-folder"></i> View </a><a href="#" class="btn btn-info btn-sm"><i class="fa fa-pencil"></i> Edit </a><a href="#" class="btn btn-danger btn-sm"><i class="fa fa-trash-o"></i> Delete </a> </td></tr>';
}
//appending data inside table <tbody>
$("#data").html(data)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-hover p-table" border="1">
  <thead>
    <tr>
      <th>Booth Name</th>
      <th>Booth Adhikari</th>
      <th>Contact</th>

      <th>Custom</th>
    </tr>
  </thead>
  <tbody id="data">
    <!--data will come here-->

  </tbody>
</table>