JSON文字列をJSONオブジェクトに変換する一番いい方法

4722 ワード

JSでJSONの文字列をJSONデータフォーマットに解析するには、一般的に2つの方法があります。
1.eval()関数を使用すること。
2.Functionオブジェクトを使って、リターン解析を行います。

第一の解析方式：eval関数を使って解析し、jQueryのeach方法を使って巡回します。
jQueryでJSONデータを解析する方法は、jQueryが非同期で要求した転送対象として、jQueryが要求した結果、JSONオブジェクトに戻ります。ここでは、サーバーがJSON形式の文字列に戻る形を考えています。JSONObjectなどのプラグインを利用してパッケージ化したJSONオブジェクトについても大同小異です。ここでは説明しません。
ここではまずJSON文字列セットを示します。文字列セットは以下の通りです。

var data = " {

root:

    [

        {name: '1', value: '0'},

        {name: '6101', value: '   '},

        {name: '6102', value: '   '},

        {name: '6103', value: '   '},

        {name: '6104', value: '   '},

        {name: '6105', value: '   '},

        {name: '6106', value: '   '},

        {name: '6107', value: '   '},

        {name: '6108', value: '   '},

        {name: '6109', value: '   '},

        {name: '6110', value: '   '}

    ]

}

";

ここでは、jQueryが非同期で取得したデータの種類――jsonオブジェクトと文字列をもとに、それぞれ2つの方法で得られた結果の処理方法を紹介します。
1、サーバーから返されたJSON文字列について、jQueryが例外的にタイプ説明をしていない場合、または文字列で受け付けている場合、対象化処理を行う必要があります。方式はあまり面倒ではなく、この文字列をeval()に置いて一回実行します。このような方法は、一般的なJavaScript方式でjsonオブジェクトを取得するのにも適しており、以下の例を挙げて説明する。

var dataObj = eval("(" + data + ")");  //    json

なぜevalに「(」+data+「)」;どうですか？
理由は、エヴァ自体の問題です。jsonは「{}」で始まり、終わりますので、JSでは語句のブロックとして扱われますので、強制的に表現に変換しなければなりません。
括弧を加える目的は、JavaScriptコードを処理する際に、文としてではなくeval関数を対象に強制的に括弧内の表現をオブジェクトに変換することです。一例として、例えばオブジェクトの字面量｛｝が、外側の括弧を加えないと、evalは、大きな括弧をJavaScriptコードブロックの開始及び終了フラグとして認識し、｛｝は空の文を実行したと見なされる。したがって、以下の二つの実行結果は異なる。



alert(eval("{}"); // return undefined

alert(eval("({})");// return object[Object]

このような書き方はJSの中であちこち見られます。
例えば:(function(){}(); クローズド操作をする時など。

alert(dataObj.root.length);//  root       

$.each(dataObj.root, fucntion(idx, item) {

 if (idx == 0) {

  return true;

 }
 //    root         

 alert("name:" + item.name + ",value:" + item.value);

})

2、サーバから返されたJSON文字列について、jQueryがtype（一般的にはこの設定属性）を「json」に設定したり、$getJSON（）メソッドを使ってサーバから戻りますと、eval()メソッドは不要です。このとき得られた結果はすでにJsonオブジェクトですので、直接にこのオブジェクトを呼び出すだけでいいです。ここでは$getJSON方法を例にとって、データ処理方法を説明する。

$.getJSON("http://blog.snsgou.com/", {param: "snsgou"}, function (data) {

 //      data   json  

 //             

 $.each(data.root, function (index, item) {

  if (index == 0) {

   return true; //  countinue，  false break

  }

  alert("name:" + item.name + ",value:" + item.value);

 });

});

ここで特に注意したいのは、1のeval（）方法は文字列（おそらくjsスクリプト）を動的に実行することであり、システムの安全問題を引き起こしやすい。したがって、いくつかのeval()を回避する第三者クライアントスクリプトライブラリを採用することができ、例えばJSON in JavaScriptは3 kを超えないスクリプトライブラリを提供する。

第二の解析方式：Functionオブジェクトを使用して完成し、その典型的な応用はjQueryのAJAXメソッドのsuccessなどでデータdataに戻る解析です。

var json='{"name":"CJ","age":18}';
data =(new Function("", "return " + json))();

この時のdataは一つの会が一つのjsonの対象に解析しました。

最後の結論は：
json文字列はjsonオブジェクトを回転して、（new Function（「return」＋json String）を使います。eval('+json String+')')の代わりに;
PS：Json操作については、ここでいくつかの実用的なjsonオンラインツールを紹介します。
オンラインJSONコード検査、検査、美化、フォーマットツール：
http://tools.jb51.net/code/json
JSONオンラインフォーマットツール：
http://tools.jb51.net/code/jsonformat
オンラインXML/JSON相互変換ツール：
http://tools.jb51.net/code/xmljson
jsonコードはオンラインフォーマット/美化/圧縮/編集/変換ツール：
http://tools.jb51.net/code/jsoncodeformat
オンラインJson圧縮/変換ツール:
http://tools.jb51.net/code/json_yasuo_トラッキング
C言語スタイル/HTML/CSS/Jsonコードフォーマット美化ツール：
http://tools.jb51.net/code/ccode_同前css_Json

jsブラウザ印刷モジュールを起動し、ボタンをクリックしてユーザー定義関数をトリガする。

jqueryプラグインの衝突(jquery.noconflit)解決方法は共有します。