如何将从ajax调用返回的数据附加到html表？

Question

实际上，我以html数据格式通过ajax调用获取响应数据，效果很好，我可以使用.html()方法轻松地将响应数据附加到表中，

下面，当我们从下拉列表中选择“全部”选项时，我创建了一个示例脚本，如何将JSON数据附加到HTML表中？

任何对此的帮助将不胜感激。谢谢

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

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

Answer 2

您可以通过为json中的每个对象构建html并将html附加到表主体中来实现。请参见示例，可以自由扩展您的示例。

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

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>