javascript - 使用 JSON 键和值动态创建表

Question

我正在从如下所示的 Ajax 调用中获取 JSON 响应:

{"Key1":"Value1" , "Key2":"Value2" , "Key3":"Value3" , "Key4":"Value4" }

我需要像这样创建一个表

KEYS  VALUES
Keys1 Value1
Keys2 Value2
Keys3 Value3
Keys4 Value4

我已经习惯通过下面这个函数读取上面的JSON字符串

var resData = {
   "Key1": "Value1",
   "Key2": "Value2",
   "Key3": "Value3",
   "Key4": "Value4",
};
JSON.parse(resData, function (k, v) {
   alert(k); // It shows Key value
   alert(v); // It shows value
});

我无法使用此功能进行构建。因此，请帮助我调整此代码或使用新代码以使用 JSON 键和值动态构建 HTML 表。

Answer 1

对于这个 html:

<table id="myTable">
    <thead>
        <tr>
            <th>KEY</th>
            <th>VALUE</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

这个 jQuery 脚本:

var resData = {"Key1":"Value1" , "Key2":"Value2" , "Key3":"Value3" , "Key4":"Value4" },
    $tbody = $('#myTable').find('tbody');

JSON.parse(resData, function (k, v) {
    $tbody.append('<tr><td>'+k+'</td><td>'+v+'</td></tr>');
});