読者です 読者をやめる 読者になる 読者になる

感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

jQueryプラグインを使ってJavaScriptオブジェクトをJSONに変換するサンプル

<スポンサーリンク>

jquery-jsonプラグイン

jQueryを使って、JavaScriptのオブジェクトをJSONに変換し、サーバ側に送信したい。
そういうときに便利なのが、jquery-jsonというライブラリだ。
jquery-json」
https://code.google.com/p/jquery-json/

このライブラリを使うと、JavaScriptのオブジェクトを

jsonObj = $.toJSON(someObj);

のような簡単な構文でJSONに変換することができる。

jQueryを使ってJavaScriptのオブジェクトをJSONに変換する

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>TEST PROJECT</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.json-2.4.js"></script>
<script type="text/javascript">
$(function() {
	var someObj = {
	    name : 'sho322',
	    age  : 28,
	    interests : ['programming','basketball']
	};

    $("#convert").click(function() {
        jsonObj = $.toJSON(someObj);
        console.log(jsonObj);
    });

});
</script>
</head>
<body>
<h2>JavaScriptオブジェクトをJSONに変換します</h2>
<input type="button" id="convert"  value="オブジェクトを変換!">
</body>
</html>

上記のようなhtmlファイルをブラウザから見て、ボタンをクリックすると、ChromeのF12で見れるコンソールには、

{"name":"sho322","age":28,"interests":["programming","basketball"]} 

のように、JSONが表示される。
JavaScriptオブジェクトをJSONに変換することができた。

jQueryプラグインを使って、JSONをJavaScriptオブジェクトに変換する

上記で書いたjquery-jsonを使って、JSONをJavaScriptオブジェクトに変換してみる。
基本的には、

var javascriptObj = $.evalJSON(jsonObj);

と書けばOK。
以下にサンプルを記載する。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>TEST PROJECT</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.json-2.4.js"></script>
<script type="text/javascript">
$(function() {
    var jsonObj = '{"name":"sho322","age":28,"interests":["programming","basketball"]} ';

    $("#convert").click(function() {
    	console.log("JSONオブジェクトは・・・");
    	console.log(jsonObj);
    	console.log("変換します");
        var javascriptObj = $.evalJSON(jsonObj);
        console.log("名前は:" + javascriptObj.name);
        console.log("年齢は:" + javascriptObj.age);
        console.log("趣味は:" + javascriptObj.interests);
    });

});
</script>
</head>
<body>
<h2>JavaScriptオブジェクトをJSONに変換します</h2>
<input type="button" id="convert"  value="オブジェクトを変換!">
</body>
</html>

上記をブラウザで表示して、ボタンを押すと、
コンソールにこのように表示される。

JSONオブジェクトは・・・ index.html:13
{"name":"sho322","age":28,"interests":["programming","basketball"]}  index.html:14
変換します index.html:15
名前は:sho322 index.html:17
年齢は:28 index.html:18
趣味は:programming,basketball 

リクエストしたJSONをパースするサーブレットのサンプル

以下に、作ったJSONをサーブレット側でパースするサンプルを作った。
http://d.hatena.ne.jp/sho322/20130830/1377818740