2010年11月03日


JSON 文字列の末端の値を PATH 形式で参照する

eval で JSON 文字列をオブジェクトに変換していますが、外部から取得する
文字列である場合、内容が危険でないかチェックする必要があります。
( prototype.js を参考にすると良いと思います )

JSON データのフォーマットは、占いAPI のものを使っているので、実際
運用しているものです。但し / でパス表現する為に、日付は / から - に変えて
います。また、内容の文章は自分で作って書き換えました。

日付の下層のデータは配列になっていますので、そのままパスに加える事によって
容易に参照可能です。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=euc-jp">
<title>JSON PATH</title>
<style>
* {
	font-size:16px;
}
</style>

</head>
<body>
<textarea id="json" cols=60 rows=8 wrap="off" >{
    "horoscope": {
        "2010-10-24": [{
            "content": "考えすぎに注意。あなたが思っているほどその問題はそれほど大きくありません。良く周り見ると他に楽しい事が待っています。",
            "item": "マンゴー",
            "money": 2,
            "total": 1,
            "job": 1,
            "color": "丹",
            "day": 24,
            "love": 2,
            "rank": 12,
            "sign": "牡羊座"
        },
        {
            "content": "迷った場合は第一印象を優先。迷うのが楽しい事もありますが、迷い過ぎると他の事に良い影響が出なかったりします。",
            "item": "回数券",
            "money": 2,
            "total": 2,
            "job": 3,
            "color": "黄土",
            "day": "",
            "love": 2,
            "rank": 10,
            "sign": "双子座"
        },
        {
            "content": "一番身近に居て、常にあなたの事を見守ってくれる人がいます。あなたももう少しその人の事を大切にすると幸せになれます。",
            "item": "てぶくろ",
            "money": 5,
            "total": 4,
            "job": 4,
            "color": "藍",
            "day": "",
            "love": 5,
            "rank": 3,
            "sign": "魚座"
        }]
    }
}</textarea>
<br>
<input id="path" type="text" size=60 value="horoscope/2010-10-24/1/content">
<hr>
<script	type="text/javascript">

// JSON 文字列の取得
var json_str = document.getElementById("json").value;

// オブジェクト化
var json = eval("(" + document.getElementById("json").value + ")");

// *********************************************************
// JSON を PATH 形式で参照する
// *********************************************************
function jsonPath( json, path ) {

	var arr = path.split("/");

	for( var i = 0; i < arr.length; i++ ) {
		json = json[arr[i]]

	}

	return json;
}
function scriptTest(evt) {

	// JSON での直接参照
	// alert( json.horoscope["2010-10-24"][1].content );

	// PATH 参照
	var path  = document.getElementById("path").value;

	// 表示
	alert( jsonPath( json, path ) );

}
</script>

<input type="button" value="実行" onclick='scriptTest(event);'>

</body>
</html>



関連する記事

VBScript : WSH で JSON 文字列からデータを取得する


posted by at 2010-11-03 13:34 | Comment(0) | JavaScript | このブログの読者になる | 更新情報をチェックする
SQLの窓全体の検索
Loading
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。