How to append data returned from ajax call to a html table?

Question

In actual I'm getting response data in ajax call in html data format, which is working fine, I can easily append response data in to table using .html() method,

Below I created a sample script when we get selected "ALL" option from the drop-down list how can I append JSON data into HTML table?

Any help regarding this will appreciated. Thank you

function get_leads_data(profile) {
		
		if (profile === 'all') {
			
			const response_data = "[{\"company\":\"Premier Property Management\", \"Property Type\":\"Single Home or Condo\", \"zip\":\"01255\"},\n" +
					"\t\t\t\n" +
					"\t\t\t{\"company\":\"Real Property Management\", \"Property Type\":\"Multi-Family (2-4 units)\", \"zip\":\"10001\"},\n" +
					"\t\t\t\n" +
					"\t\t\t{\"company\":\"Horde Property Management\", \"Property Type\":\"Homeowners Association (2-49 units)\", \"zip\":\"00688\"}\n" +
					"\t\t]";
			
			const jsonObject = JSON.parse(response_data);
			
			alert(JSON.stringify(jsonObject));
			$('#response_table').append(jsonObject);
			
		}
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="company_id" onchange="get_leads_data(this.value);">
	
	<option value="Premier Property Management"> Premier Property Management</option>
	<option value="all"> All</option>

</select>

<br><br>

<table id="response_table" border="1">
	<thead>
	<tr>
		<th>Company</th>
		<th>Property Type</th>
		<th>zipcode</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td>Premier Property Management</td>
		<td>Single Home or Condo</td>
		<td>01255</td>
	</tr>
	</tbody>
</table>

Answer 1

function get_leads_data(profile) {

  if (profile === 'all') {

    const response_data = "[{\"company\":\"Premier Property Management\", \"Property Type\":\"Single Home or Condo\", \"zip\":\"01255\"},\n" +
      "\t\t\t\n" +
      "\t\t\t{\"company\":\"Real Property Management\", \"Property Type\":\"Multi-Family (2-4 units)\", \"zip\":\"10001\"},\n" +
      "\t\t\t\n" +
      "\t\t\t{\"company\":\"Horde Property Management\", \"Property Type\":\"Homeowners Association (2-49 units)\", \"zip\":\"00688\"}\n" +
      "\t\t]";

    const jsonObject = JSON.parse(response_data);

    var tr = '';
    $.each(jsonObject, function(i, item) {
      tr += '<tr><td>' + item.company + '</td><td>' + item.company + '</td><td>' + item.zip + '</td></tr>';
    });
    $('#response_table tbody').html(tr);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="company_id" onchange="get_leads_data(this.value);">

  <option value="Premier Property Management"> Premier Property Management</option>
  <option value="all"> All</option>

</select>

<br><br>

<table id="response_table" border="1">
  <thead>
    <tr>
      <th>Company</th>
      <th>Property Type</th>
      <th>zipcode</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Premier Property Management</td>
      <td>Single Home or Condo</td>
      <td>01255</td>
    </tr>
  </tbody>
</table>

Answer 2

You can do this by building the html for each object in your json and appending the html to the table body. See example, took the liberty to expand on your example.

function get_leads_data(profile) {

  if (profile === 'all') {

   //Clears out html to show all to stop duplicating the rows
  $('#response_table tbody').html('');

    const response_data = "[{\"company\":\"Premier Property Management\", \"Property Type\":\"Single Home or Condo\", \"zip\":\"01255\"},\n" +
        "\t\t\t\n" +
        "\t\t\t{\"company\":\"Real Property Management\", \"Property Type\":\"Multi-Family (2-4 units)\", \"zip\":\"10001\"},\n" +
        "\t\t\t\n" +
        "\t\t\t{\"company\":\"Horde Property Management\", \"Property Type\":\"Homeowners Association (2-49 units)\", \"zip\":\"00688\"}\n" +
        "\t\t]";

    const jsonObject = JSON.parse(response_data);

    for( jObject of jsonObject) {

      let htmlToAppend = (`
        <tr>
          <td>${jObject['company']}</td>
          <td>${jObject['Property Type']}</td>
          <td>${jObject['zip']}</td>
        </tr>
      `);

      $('#response_table tbody').append( htmlToAppend);
    }

  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="company_id" onchange="get_leads_data(this.value);">

<option value="Premier Property Management"> Premier Property Management</option>
<option value="all"> All</option>

</select>

<br><br>

<table id="response_table" border="1">
<thead>
<tr>
  <th>Company</th>
  <th>Property Type</th>
  <th>zipcode</th>
</tr>
</thead>
<tbody>
<tr>
  <td>Premier Property Management</td>
  <td>Single Home or Condo</td>
  <td>01255</td>
</tr>
</tbody>
</table>

Answer 3

var tr = document.createElement('tr');
var td = document.createElement('td');
td.innerHTML = YourValueHere;
tr.appendChild(td);
document.getElementByID('response_table').appendChild(tr);