Javascript 使用JSON键和值动态创建表

我从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表。

像这样做

var table = "<table>";
var resData = {"Key1":"Value1" , "Key2":"Value2" , "Key3":"Value3" , "Key4":"Value4" }
resData = JSON.parse(resData);
for(var k in resData ) {
table +="<tr><td>"+k+"</td><td>"+resData[k]+"</td></tr>";
});
table +="</table>"

var表=”；
var resData={“Key1”：“Value1”，“Key2”：“Value2”，“Key3”：“Value3”，“Key4”：“Value4”}
resData=JSON.parse（resData）；
for（resData中的var k）{
表+=“”+k+“”+resData[k]+“”；
});
表+=“”

对于此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>');
});

var resData={“Key1”：“Value1”，“Key2”：“Value2”，“Key3”：“Value3”，“Key4”：“Value4”}，
$tbody=$（'#myTable'）。查找（'tbody'）；
parse（resData，function（k，v）{
$tbody.追加（“”+k+“”+v+“”）；
});

还有另一种方法。动态创建表

var table = $('<table/>').html('<thead><tr><th>KEYS</th><th>VALUES</th></tr></thead>').appendTo('body'),
    tbody = table.append('<tbody/>');
$.each(resData, function(key, value){
    tbody.append('<tr><td>'+key+'</td><td>'+value+'</td></tr>');
});

---

当表格呈现在页面上时，它会显示一个额外的[object object]，如{“Key1”：“Value1”，“Key2”：“Value2”，“Key3”：“Value3”，“Key4”：“Value4”，““”：“[object object]”。。为什么会这样？我怎样才能避免呢？