JavaScriptプログラムに関する各種メモ書き:タグ「json」での検索

JSON記述の基本とデコード( json2.js )

ajaxでデータをやりとりする際に json 形式でデータをやりとりすることが多い。

jsonの記述フォーマットをよく忘れてしまうのでひな形をここに↓

jsonデータの記述

var json_text  ='{"bindings": [ { "id": 123456, "name": "myname" } ]}';
var json_text2 = '["key1":"val1", "key2":"val2", "key3":"val3"]';

jsonデータのデコード( json2.js )

下記サイトから json2.js をダウンロードします。

https://github.com/douglascrockford/JSON-js

使用方法は

// 古いやり方 var json_object = eval('(' + json_text + ')');
var json_object = JSON.parse( json_text );

alert(json_object.bindings[0].id);
alert(json_object.bindings[0].name);
No.535
02/24 16:37

edit

json

DOMオブジェクト・jQueryオブジェクト をダンプ(テキスト表示)する。

デバッグ時には必ず出くわすのですが、DOMオブジェクトの中身を見たい!という時があります。

・DOMオブジェクトの中身を確認したいときには以下のようにします。

Firefox限定ですが便利。

var serializer = new XMLSerializer();
alert( serializer.serializeToString( dom_obj ) );

・Safari、Chrome, Firefox でオブジェクトの中身を確認したいときには以下のようにします。(出力は「エラーコンソール」)

console.log( object )

Chrome, Firefox でオブジェクトの中身が DOMオブジェクトなのか jQueryオブジェクトなのかを確認したいときは

console.log( Object.getPrototypeOf( $("#test01") ) );
console.log( Object.getPrototypeOf( document.getElementById('test01') ) );

とします。 jQueryの場合は【jQuery】、DOMオブジェクトの場合は 【HTML.......】と表示されます。

ただ、そもそもオブジェクト以外の者を渡した場合場合にエラーとなりますので、

	if (Object.prototype.toString.call(my_obj)==='[object Object]'){ console.log(Object.getPrototypeOf( my_obj )); }

としてもいいです。


どうせなら groupメソッドを使って

jq_obj =  $("#test01");

console.group('jq_objの中身は↓');
console.log(Object.getPrototypeOf( jq_obj ));
console.log(jq_obj);
console.groupEnd();

とするとメッセージがグループ化されていい感じに見えます。


・jQueryオブジェクトをダンプしたい場合は

http://goo.gl/rXUKI

が便利です。

・その他のオブジェクト(JSON等)、配列、連想配列などをダンプしたい場合は

JKL.Dumper が便利です↓

http://www.kawa.net/works/js/jkl/dumper.html

使い方(オブジェクト hoge の中身をダンプする)

<script type="text/javascript" src="jkl-dumper.js"></script> 
var hoge = [1,2,3,4,5];
alert( new JKL.Dumper().dump(hoge) );

便利!!!

No.510
06/13 17:25

edit

DOM
json
配列
jQuery