Как конвертировать JSON объект в HTML данные [закрыто]

у меня есть объект json, имеющий данные как:

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

Я хочу преобразовать его в таблицу HTML, например:

name|Value
a     1
b     3
ds    4

может кто-нибудь предложить способ, как это сделать в HTML?.

спасибо

7
html html-table json

3 ответов

простой с jquery:

    $(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/

редактировать

и вы можете использовать эту библиотеку JS. Эта библиотека преобразует json в таблицу с сортировкой и т. д: http://www.dynatable.com/

11

вы можете использовать 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>
5

вы должны взглянуть на выбывание.js. При этом вы можете взять свои данные (Json) и привязать их к элементам HTML. Обновление и т. д. затем это делается автоматически, поэтому вам не нужно возиться с этим самостоятельно. Взгляните на примеры:http://knockoutjs.com/examples/simpleList.html

0