如何在html文件中显示Json数据？只需使用html，css和json页面

Question

所以我有一个看起来像这样的Json文件

{
    "data": [{
        "name": "Garrett Winters",
        "designation": "Accountant",
        "salary": "$170,750",
        "joining_date": "2011/07/25",
    }, {
        "name": "Brielle Williamson",
        "designation": "Integration Specialist",
        "salary": "$372,000",
        "joining_date": "2012/12/02",
    }]
}

我希望在html中显示每个数据的表格。我知道如何在html中创建表。我需要帮助将json与html合并。 谢谢

Answer 1

您可以通过多种方式执行此操作，例如：

＆＃13;

＆＃13;

var arr = {
  "data": [{
    "name": "Garrett Winters",
    "designation": "Accountant",
    "salary": "$170,750",
    "joining_date": "2011/07/25",
  }, {
    "name": "Brielle Williamson",
    "designation": "Integration Specialist",
    "salary": "$372,000",
    "joining_date": "2012/12/02",
  }]
};
$(function() {
  $(arr.data).each(function(i, v) {
    $("<tr></tr>")
      .append($("<td></td>").html(v.name + "</td>"))
      .append($("<td></td>").html(v.designation + "</td>"))
      .append($("<td></td>").html(v.salary + "</td>"))
      .append($("<td></td>").html(v.joining_date + "</td>"))
      .appendTo("#tbl");
  });

});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;