JSONデータから作成したテーブルを印刷するにはどうすればよいですか？

Question

私のコードは正常に動作していますが、JSON値から作成した表は印刷できません。助言がありますか？？

var resData = {"key1":"value","key2":"value"}; 

var table = $('<html/>').append('<thead><tr><th>Filter</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>'); 
}); 
console.log(table); 

Answer 1

をHTMLに追加このような。

var resData = {"key1":"value","key2":"value"}; 
 

 
var table_str = '<table><thead><tr><th>Filter</th><th>Values</th></tr></thead>'; 
 
    table_str += '<tbody>'; 
 
$.each(resData, function(key, value){ 
 
    table_str +='<tr><td>'+key+'</td><td>'+value+'</td></tr>'; 
 
}); 
 
$("#content").html(table_str); 
 
console.log(table_str);

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

Answer 2

最初var tableに完全なテーブルのHTMLを作成し、あなたがvaribleを追加することができ、本体

Answer 3

にテーブルを追加し、値とそれをconcatinateして、単にあなたが作ることができ

var resData = {"key1":"value","key2":"value"}; 

var table='<table><thead><tr><th>Filter</th><th>Values</th></tr></thead><tbody><tbody/>'; 
$.each(resData, function(key, value){ 
    table+='<tr><td>'+key+'</td><td>'+value+'</td></tr>'; 
}); 
table+='</table>'; 
$('<html/>').append(table); 
console.log(table); 

Answer 4

コンソールに直接jQueryオブジェクトを印刷しています。私はあなたがテーブルのHTMLコンテンツを必要とすると思います。 console.log(table.html())を使用する必要があります。参照してくださいhtml() docs

Answer 5

はJavaScriptでこれを試してみてください：

var resData = {"key1":"value","key2":"value"}; 
 

 
var table = '<table><thead><tr><th>Filter</th><th>Values</th></tr></thead>'; 
 
table += '<tbody>'; 
 
for (var i in resData) { 
 
    table += '<tr><td>'+i+'</td><td>'+resData[i]+'</td></tr>'; 
 
} 
 
document.getElementById("table").innerHTML = table;

table,th,td { border: 1px solid black; }

<div id="table"> 
 
</div>