JSONオブジェクトの可視化

README

jQuery 1.9からappendやafterの挙動が変わりました。
http://myjquery.blog.fc2.com/blog-entry-14.html
http://jsdo.it/ogaoga/mlE0 は jQuery 1.6で書かれていましたので 1.9 で動くようにしました。
結果として得られる画面は全く同じです。


--- 以下の記述は元のREADMEの一部です ---

テキストエリアに JSON をコピペしてボタンを押すと、そのデータ構造をテーブル形式で可視化します。
フルスクリーンにして Twitter API とかの JSON 出力を貼付けると面白いです。
http://api.twitter.com/1/users/show.json?screen_name=TwitterAPI&include_entities=true

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
// jQuery 1.9.1 で動くようにした。

$(function(){
// ===================================================
    
    function objectToTable(obj, parent) {
        var table = $("<table>").appendTo(parent);
        var tbody = $("<tbody>").appendTo(table);
        for ( var key in obj ) {
            var tr = $("<tr>").appendTo(tbody);
            var th = $('<th>').appendTo(tr);
            th.append(key);
            var td = $('<td>').appendTo(tr);
            if ( typeof(obj[key]) == 'object' ) {
                if ( obj[key] ) {
                    objectToTable(obj[key], td);
                } else {
                    td.append('<span class="null">null</span>');
                }//if
            }else if ( typeof(obj[key]) == 'boolean' ) {
                var str = (obj[key]) ? 'true' : 'false';
                td.append('<span class="boolean">'+str+'</span>'); 
            }else if ( typeof(obj[key]) == 'string' ) {
                td.append('<span class="string">"'+obj[key]+'"</span>');
            }else {
                td.append(obj[key].valueOf());
            }//if
        }//for
    }
    
    $('#show_button').click(function(){
        var value = '';
        var source = $('#source').val();
        if ( source ) {
          var parent = $('#container');
          parent.empty();
          try {
              objectToTable(eval("("+source+")"), parent);
          } catch (e) {
              parent.append('<pre>'+e+'</pre>');
          }//try
        }//if
    });
    
    $(document).ready(function(){
        $('#show_button').trigger('click');
    });

    $('#source')
		.live('drop', function(e){
            e.stopPropagation();
            e.preventDefault();
            $(this).removeClass('over');
            var files = e.originalEvent.dataTransfer.files;
                if ( files && files.length > 0 ) {
                    var file = files[0];
                    var reader = new FileReader();
                    reader.onload = function(event)	{
                        //console.log(this.result);
                        $('#source').val(this.result);
                        $('#show_button').trigger('click');
                    }
                    reader.readAsText(file);
                }
            })
        .live('dragenter', function(e){
            e.stopPropagation();
            e.preventDefault();
			$(this).addClass('over');
        })
        .live('dragleave', function(e){
            e.stopPropagation();
            e.preventDefault();
			$(this).removeClass('over');
        });
    
// ===================================================
});