forked: JavaScript のオブジェクトを可視化するやーつ

jsdoit.css

body { background-color: #DDDDDD; font: 12px sans-serif; }

td, th  {
    border-width: 1px;
    border-color: #99a;
    border-style: solid;
}

table {
    margin: 4px 2px;
    background-color: #f0f0ff;
    border-collapse: collapse;
    border-width: 2px;
    border-color: #669;
    border-style: solid;
}

td, th {
    vertical-align: top;
    margin: 0px;
    padding: 2px 6px
}

td {
    text-align: left;
    background-color: white;
}

th {
    text-align: right;
    background-color: #eef;
}

.boolean, .null {
    font-style: italic;
}

.over {
    background-color: pink;
}

jsdoit.html

↓ここに JSON を貼付けてボタンを押す。もしくは .json ファイルをドロップ。<br />
<textarea id="source" rows="10" cols="50">
{'text': 'text value',
 'int': 123,
 'array': ['first', 'second', 'third'],
 'object': {'child0': 'apple',
            'child1': {'color': ['red', 'green', 'blue']}},
 'boolean': [false, true],
 'null': null
}
</textarea>
<br />
<input type="button" id="show_button" value="Show" />
<br />

<div id="container">Loading...</div>

jsdoit.js

// forked from ogaoga's "JavaScript のオブジェクトを可視化するやーつ" http://jsdo.it/ogaoga/mlE0

function XbcG(obj) {
    var table = $('<table>').append('<tbody>');
    for (var key in obj) {
        var tr = $('<tr>');
        var th = $('<th>').append(key);
        var td = $('<td>');
        var value;
        if (typeof (obj[key]) == 'object') {
            if (obj[key]) {
                value = objectToTable(obj[key]);
            } else {
                value = '<span class="null">null</span>';
            }
        } else if (typeof (obj[key]) == 'boolean') {
            var str = (obj[key]) ? 'true' : 'false';
            value = '<span class="boolean">' + str + '</span>';
        } else if (typeof (obj[key]) == 'string') {
            value = '<span class="string">"' + obj[key] + '"</span>';
        } else {
            value = obj[key].valueOf();
        }
        td.append(value);
        tr.append(th.after(td));
        table.append(tr);
    }

    $("html").empty().append(table);
}