web-dev-qa-db-ja.com

JSONをJavaScriptオブジェクトに逆シリアル化する

AJAXを使用してアクセスされるJavaサーバーアプリケーションに文字列があります。それは次のようになります。

var json = [{
    "adjacencies": [
        {
          "nodeTo": "graphnode2",
          "nodeFrom": "graphnode1",
          "data": {
            "$color": "#557EAA"
          }
        }
    ],
    "data": {
      "$color": "#EBB056",
      "$type": "triangle",
      "$dim": 9
    },
    "id": "graphnode1",
    "name": "graphnode1"
},{
    "adjacencies": [],
    "data": {
      "$color": "#EBB056",
      "$type": "triangle",
      "$dim": 9
    },
    "id": "graphnode2",
    "name": "graphnode2"
}];

文字列がサーバーから取得されたとき、これを生きているJavaScriptオブジェクト（または配列）に変える簡単な方法はありますか？それとも、手動で文字列を分割してオブジェクトを手動で構築する必要がありますか？

javascriptjsondeserialization
238
mj_

最近のブラウザはJSON.parse()をサポートしています。

var arr_from_json = JSON.parse( json_string );

そうでないブラウザでは、 json2ライブラリ を含めることができます。

372
user113716

JSONの最大のポイントは、JSON文字列を何もしなくてもネイティブオブジェクトに変換できることです。このリンクをチェックしてください リンク

eval(string)またはJSON.parse(string)のどちらかを使用できます。

ただし、evalは危険です。 json.orgから：

Eval関数はとても速いです。ただし、JavaScriptプログラムをコンパイルして実行することができるため、セキュリティ上の問題が生じる可能性があります。 evalの使用は、情報源が信頼され有能である場合に示されます。 JSONパーサーを使用する方がはるかに安全です。 XMLHttpRequestを介したWebアプリケーションでは、通信はそのページを提供しているのと同じOriginに対してのみ許可されるため、信頼されています。しかし、それは有能ではないかもしれません。サーバーのJSONエンコーディングが厳密ではない場合、またはすべての入力を慎重に検証しない場合は、危険なスクリプトを含む可能性がある無効なJSONテキストを配信する可能性があります。 eval関数はスクリプトを実行し、その悪意を解き放ちます。

24
Abhinav

JQueryと同じようにしてください。 （本質）

function parseJSON(data) {
    return window.JSON && window.JSON.parse ? window.JSON.parse( data ) : (new Function("return " + data))(); 
}
// testing
obj = parseJSON('{"name":"John"}');
alert(obj.name);

こうすれば外部ライブラリは不要で、古いブラウザでも動作します。

15
Ravan Scafi

配列のすべての要素を集めてjsonオブジェクトを返す

collectData: function (arrayElements) {

        var main = [];

        for (var i = 0; i < arrayElements.length; i++) {
            var data = {};
            this.e = arrayElements[i];            
            data.text = arrayElements[i].text;
            data.val = arrayElements[i].value;
            main[i] = data;
        }
        return main;
    },

このようにして行ったのと同じデータを解析するために

dummyParse: function (json) {       
        var o = JSON.parse(json); //conerted the string into JSON object        
        $.each(o, function () {
            inner = this;
            $.each(inner, function (index) {
                alert(this.text)
            });
        });

}
7
Tarun Gupta

eval()を使うこともできますが、JSON.parse()の方がより安全で簡単な方法です。

うまく機能しています

var yourJsonObject = JSON.parse(json_as_text);

私はなぜあなたがevalを使うのを好む理由が何もないと思います。それはあなたのアプリケーションを危険にさらすだけです。

それは言った - これも可能です。

悪い - でもうまくいく

var yourJsonObject = eval(json_as_text);

なぜevalは悪い考えなのですか？

次の例を考えてください。

第三者またはユーザーがJSON文字列データを提供しました。

var json = `
[{
    "adjacencies": [
        {
          "nodeTo": function(){
            return "delete server files - you have been hacked!";
          }(),
          "nodeFrom": "graphnode1",
          "data": {
            "$color": "#557EAA"
          }
        }
    ],
    "data": {
      "$color": "#EBB056",
      "$type": "triangle",
      "$dim": 9
    },
    "id": "graphnode1",
    "name": "graphnode1"
},{
    "adjacencies": [],
    "data": {
      "$color": "#EBB056",
      "$type": "triangle",
      "$dim": 9
    },
    "id": "graphnode2",
    "name": "graphnode2"
}]
`;

サーバーサイドスクリプトがそのデータを処理します。

JSON.parse：を使う

window.onload = function(){
  var placeholder = document.getElementById('placeholder1');
  placeholder.innerHTML = JSON.parse(json)[0].adjacencies[0].nodeTo;
}

投げます：

Uncaught SyntaxError: Unexpected token u in JSON at position X.

機能は実行されません。

あなたは安全です。

eval()を使う：

window.onload = function(){
  var placeholder = document.getElementById('placeholder1');
  placeholder.innerHTML = eval(json)[0].adjacencies[0].nodeTo;
}

関数を実行してテキストを返します。

その無害な機能をあなたのウェブサイトのフォルダからファイルを削除するものに置き換えれば、ハッキングされたことになります。この例では、エラーや警告は発生しません。

あなたは安全ではありません。

JSONテキスト文字列を操作して、サーバー上で実行される機能として機能するようにしました。

eval(JSON)[0].adjacencies[0].nodeToはJSON文字列を処理することを想定していますが、実際にはサーバー上で関数を実行しただけです。

これはeval()関数に渡す前にユーザーサイドで提供されたデータをすべてサーバーサイドでチェックすることでも防ぐことができますが、なぜJSONを解析するための組み込みツールを使わずにこの問題と危険を避けるのですか？

3
DevWL

また、逆シリアル化されたオブジェクトにも機能を持たせたい場合は、私の小さなツールを使用できます。 https://github.com/khayll/jsmix

//first you'll need to define your model
var GraphNode = function() {};
GraphNode.prototype.getType = function() {
   return this.$type;
}

var Adjacency = function() {};
Adjacency.prototype.getData =n function() {
    return this.data;
}

//then you could say:
var result = JSMix(jsonData)
    .withObject(GraphNode.prototype, "*")
    .withObject(Adjacency.prototype, "*.adjacencies")
    .build();

//and use them
console.log(result[1][0].getData());
1
fishgen

サーバーサイドの文字列をhtmlに貼り付けても、何もする必要はありません。

JspのプレーンJavaの場合：

var jsonObj=<%=jsonStringInJavaServlet%>;

JSP幅ストラットの場合：

var jsonObj=<s:property value="jsonStringInJavaServlet" escape="false" escapeHtml="false"/>;
0
surfealokesea