如何将json数据显示为html

How to Display json data into html

本文关键字：显示 html 数据 json      更新时间：2023-09-26

我正在尝试将JSON数据呈现为HTML，如下所示：

var data = [
     {"id":"856","name":"India"},
     {"id":"1035","name":"Chennai"},
     {"id":"1048","name":"Delhi"},
     {"id":"1113","name":"Lucknow"},
     {"id":"1114","name":"Bangalore"},
     {"id":"1115","name":"Ahmedabad"},
     {"id":"1116","name":"Cochin"},
     {"id":"1117","name":"London"},
     {"id":"1118","name":"New York"},
     {"id":"1119","name":"California"}
];
function drawTable(data) {
    for (var i = 0; i < data.length; i++) {
        drawRow(data[i]);
    }
}
function drawRow(rowData) {
    var row = $("<tr />")
    $("#myDataTable").append(row); 
    row.append($("<td>" + rowData.id + "</td>"));
    row.append($("<td>" + rowData.name + "</td>"));
}
<table id="myDataTable">
    <tr>
        <th>Id</th>
        <th>Name</th>
    </tr>
</table>

但它不起作用。

您没有调用函数drawTable()。也可以使用$.each()循环data阵列

var data = [{
  "id": "856",
  "name": "India"
}, {
  "id": "1035",
  "name": "Chennai"
}, {
  "id": "1048",
  "name": "Delhi"
}, {
  "id": "1113",
  "name": "Lucknow"
}, {
  "id": "1114",
  "name": "Bangalore"
}, {
  "id": "1115",
  "name": "Ahmedabad"
}, {
  "id": "1116",
  "name": "Cochin"
}, {
  "id": "1117",
  "name": "London"
}, {
  "id": "1118",
  "name": "New York"
}, {
  "id": "1119",
  "name": "California"
}];
drawTable();
function drawTable() {
  var table = $("#myDataTable");
  $.each(data, function(index, rowData) {
    table.append(
      "<tr>"
        +"<td>"+rowData.id+"</td>"
        +"<td>"+rowData.name+"</td>"
      +"</tr>"
    );
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myDataTable">
  <tr>
    <th>Id</th>
    <th>Name</th>
  </tr>
</table>

var data = [{
  "id": "856",
  "name": "India"
}, {
  "id": "1035",
  "name": "Chennai"
}, {
  "id": "1048",
  "name": "Delhi"
}, {
  "id": "1113",
  "name": "Lucknow"
}, {
  "id": "1114",
  "name": "Bangalore"
}, {
  "id": "1115",
  "name": "Ahmedabad"
}, {
  "id": "1116",
  "name": "Cochin"
}, {
  "id": "1117",
  "name": "London"
}, {
  "id": "1118",
  "name": "New York"
}, {
  "id": "1119",
  "name": "California"
}];
function drawRow(rowData) {
  var table = document.getElementById('myDataTable');
  for (var i = 0; i < rowData.length; i++) {
    var tr = document.createElement('tr');
    var td_1 = document.createElement('td');
    var td_2 = document.createElement('td');
    td_1.innerText = rowData[i].id;
    td_2.innerText = rowData[i].name;
    tr.appendChild(td_1);
    tr.appendChild(td_2);
    table.appendChild(tr);
  }
}
drawRow(data);
<table id="myDataTable">
  <tr>
    <th>Id</th>
    <th>Name</th>
  </tr>
</table>

相关文章：