どのようにHTMLデータ

Question

にJSONオブジェクトを変換すると、私はデータを持つJSONオブジェクトを持っている：私はのようなHTMLテーブルに変換したい

{"a":1,"b",3,"ds",4} 

：

name|Value 
a  1 
b  3 
ds 4 

すると、誰かが道を提案することができますどのようにHTMLでそれを行うには？

ありがとうございます。

Answer 1

：例を見て

$(function(){ 

     var jsonObj = $.parseJSON('{"a":1,"b":3,"ds":4}'); 
     var html = '<table border="1">'; 
     $.each(jsonObj, function(key, value){ 
      html += '<tr>'; 
      html += '<td>' + key + '</td>'; 
      html += '<td>' + value + '</td>'; 
      html += '</tr>'; 
     }); 
     html += '</table>'; 

     $('div').html(html); 
    }); 

テスト：http://jsfiddle.net/T7eQg/1/

EDIT

、あなたは、このライブラリのJSを使用することができます。このライブラリは、ソートやなどで、テーブルにJSONに変換： http://www.dynatable.com/

Answer 2

knockout.jsをご覧ください。これにより、（Json）データをHTML要素にバインドすることができます。更新などは自動的に行われるので、あなた自身でそれを混乱させる必要はありません。 jQueryを使って簡単なhttp://knockoutjs.com/examples/simpleList.html

Answer 3

JavaScriptを使用することができます。

<script type="text-javascript"> 
    var data = {"a": 1, "b": 3, "ds": 4};  

    // Create a new table 
    var table = document.createElement("table"); 

    // Add the table header 
    var tr = document.createElement('tr'); 
    var leftRow = document.createElement('td'); 
    leftRow.innerHTML = "Name"; 
    tr.appendChild(leftRow); 
    var rightRow = document.createElement('td'); 
    rightRow.innerHTML = "Value"; 
    tr.appendChild(rightRow); 
    table.appendChild(tr); 

    // Add the table rows 
    for (var name in data) { 
     var value = data[name]; 
     var tr = document.createElement('tr'); 
     var leftRow = document.createElement('td'); 
     leftRow.innerHTML = name; 
     tr.appendChild(leftRow); 
     var rightRow = document.createElement('td'); 
     rightRow.innerHTML = value; 
     tr.appendChild(rightRow); 
     table.appendChild(tr); 
    } 

    // Add the created table to the HTML page 
    document.body.appendChild(table); 
</script> 

jsfiddle

結果のHTML構造は次のとおりです。

<table> 
    <tr> 
     <td>Name</td> 
     <td>Value</td> 
    </tr> 
    <tr> 
     <td>a</td> 
     <td>1</td> 
    </tr> 
    <tr> 
     <td>b</td> 
     <td>3</td> 
    </tr> 
    <tr> 
     <td>ds</td> 
     <td>4</td> 
    </tr> 
</table>