デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

jQuery.parseJSON( )文字列をJSONに変換

構文

文字列をJSONに変換返値:jacaScriptオブジェクト
jQuery.parseJSON( 文字列 )ver1.4.1〜

機能

jQuery.parseJSONメソッドは引数に設定された文字列をJSON(javaScriptオブジェクト)に変換します。引数に設定する文字列はJSONのルールに従っている必要があります。JSONのルールに従っていない文字列や空の文字列、undefinedなどを設定するとnullを返します。

解説

jsonデータについて

jsonデータはjavaScriptをベースにした「データ記述言語」です。配列やObjectオブジェクトなどを設定しておくと、読み込んだjavaScript側でeval関数などを使わなくても(文字列ではなく)データとして利用できる便利なものです。→参考(wikipedia:JSON

ただし以下の様にjavaScriptと異なる点があり注意しなければなりません

JSONデータの注意点
・シングルクォートは使えません
・objectオブジェクトのプロパティも文字列として設定します(ダブルクォートで囲む)。
・文字コードは「UTF-8」

文字列をJSON(javaScript)に変換します

サンプル(parseJSON/01.html)を開いてbody内にbutton要素しかないことを確認して下さい。jQueryは以下の様に記述されています。2行目でJSONに変換したい文字列「jsonText」が作成され、3行目でjQuery.parseJSONメソッドを利用してjsonTextをjson(javaScriptオブジェクト)に変換しています。

$("button").click(function(){
	jsonText ='{"name":"john", "age":18}';
	var myJson = $.parseJSON(jsonText);
	$("body").append(myJson.name);
});

変換されたjsonはjavaScriptのデータとして扱えるので、4行目のようにプロパティ名を指定するだけで値を取得することができます。取得した値はappendメソッドを利用してbody要素内に追加していきます。
結果として、buttonをクリックするとbody内に「john」と表示されます。

関連項目

外部にあるJSONファイルを読み込む場合はjQuery.getJSONメソッドを利用してください。
文字列をXMLドキュメントに変換したい場合はjQuery.parseXMLメソッドを利用してください。
文字列をHTMLドキュメントに変換したい場合はjQuery.parseHTMLメソッドを利用してください。