web-dev-qa-db-ja.com

JQueryでJSONにシリアライズする

オブジェクトをJSONにシリアル化する必要があります。私はjQueryを使っています。これを行うための「標準的な」方法はありますか？

私の特定の状況：私は以下のように定義された配列を持っています：

var countries = new Array();
countries[0] = 'ga';
countries[1] = 'cd';
...

そしてこれを文字列に変換して$.ajax()に渡す必要があります。

$.ajax({
    type: "POST",
    url: "Concessions.aspx/GetConcessions",
    data: "{'countries':['ga','cd']}",
...
javascriptjqueryajaxjsonserialization
1176
Herb Caudill

JSON-js - JavaScriptのJSON。

オブジェクトを文字列に変換するにはJSON.stringifyを使います。

var json_text = JSON.stringify(your_object, null, 2);

JSON文字列をオブジェクトに変換するには、JSON.parseを使用します。

var your_object = JSON.parse(json_text);

John Resig ：が最近それを勧めています。

... JSONを使用するアプリケーションをCrockfordのjson2.jsに移行してください。 ECMAScript 5仕様と完全に互換性があり、ネイティブ（より速い！）実装が存在する場合は適切に機能が低下します。

実際、JSON.parseメソッドが存在する場合はそれを利用する、昨日のjQueryの変更点に着手しました。これは完全に指定されたためです。

私は彼がJavaScriptの問題について言っていることを信頼する傾向があります:)

すべての最近のブラウザ （および古くない多くの古いブラウザ）は JSONオブジェクトをネイティブにサポートしています 。現在のバージョンのCrockfordのJSONライブラリは、JSON.stringifyとJSON.parseがまだ定義されていない場合にのみ定義し、ブラウザのネイティブ実装はそのまま残します。

1116
user18015

私は jquery-json を6か月間使用してきましたが、とてもうまくいきます。使い方はとても簡単です。

var myObj = {foo: "bar", "baz": "wockaflockafliz"};
$.toJSON(myObj);

// Result: {"foo":"bar","baz":"wockaflockafliz"}
183
Jay Taylor

IE8で動作します+

JQueryは必要ありません。次のものを使用してください。

JSON.stringify(countries);
95
pestatije

私はそれを使っていませんが、Mark Gibsonによって書かれたjQueryプラグインを試してみたいかもしれません

それは2つの機能を追加します：$.toJSON(value)、$.parseJSON(json_str, [safe])。

44
Tahir Akhtar

いいえ、JSONにシリアライズする標準的な方法は、既存のJSONシリアライゼーションライブラリを使用することです。これをしたくないのなら、あなたはあなた自身のシリアライゼーションメソッドを書く必要があるでしょう。

これを行う方法についてのガイダンスが必要な場合は、利用可能なライブラリのいくつかのソースを調べることをお勧めします。

編集： 独自のシリアル化メソッドを書くのは悪いことだとは思いませんが、整形式のJSONを使用することがアプリケーションにとって重要である場合は、オーバーヘッドを考慮する必要がありますあなたのカスタムメソッドがいつかあなたが予想していなかった失敗ケースに遭遇するかもしれないという可能性に対する「もう一つの依存関係」の。そのリスクが許容できるかどうかはあなたの電話です。

35
Adam Bellaire

私はこれをどこかで見つけました。しかし、StackOverflowでおそらくどこに覚えていないことができます:)

$.fn.serializeObject = function(){
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name]) {
            if (!o[this.name].Push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].Push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};
27
jmort253

外部ライブラリを使用したくない場合は、.toSource()ネイティブJavaScriptメソッドがありますが、完全にクロスブラウザーではありません。

11
Kain Haart

最善の方法は、 _ json _ objectにpolyfillを含めることです。

しかし、jQuery名前空間内でオブジェクトをJSON表記（ JSON の有効な値）にシリアル化するためのメソッドを作成したい場合は、次のようにすることができます。

実装

// This is a reference to JSON.stringify and provides a polyfill for old browsers.
// stringify serializes an object, array or primitive value and return it as JSON.
jQuery.stringify = (function ($) {
  var _PRIMITIVE, _OPEN, _CLOSE;
  if (window.JSON && typeof JSON.stringify === "function")
    return JSON.stringify;

  _PRIMITIVE = /string|number|boolean|null/;

  _OPEN = {
    object: "{",
    array: "["
  };

  _CLOSE = {
    object: "}",
    array: "]"
  };

  //actions to execute in each iteration
  function action(key, value) {
    var type = $.type(value),
      prop = "";

    //key is not an array index
    if (typeof key !== "number") {
      prop = '"' + key + '":';
    }
    if (type === "string") {
      prop += '"' + value + '"';
    } else if (_PRIMITIVE.test(type)) {
      prop += value;
    } else if (type === "array" || type === "object") {
      prop += toJson(value, type);
    } else return;
    this.Push(prop);
  }

  //iterates over an object or array
  function each(obj, callback, thisArg) {
    for (var key in obj) {
      if (obj instanceof Array) key = +key;
      callback.call(thisArg, key, obj[key]);
    }
  }

  //generates the json
  function toJson(obj, type) {
    var items = [];
    each(obj, action, items);
    return _OPEN[type] + items.join(",") + _CLOSE[type];
  }

  //exported function that generates the json
  return function stringify(obj) {
    if (!arguments.length) return "";
    var type = $.type(obj);
    if (_PRIMITIVE.test(type))
      return (obj === null ? type : obj.toString());
    //obj is array or object
    return toJson(obj, type);
  }
}(jQuery));

使用法

var myObject = {
    "0": null,
    "total-items": 10,
    "undefined-prop": void(0),
    sorted: true,
    images: ["bg-menu.png", "bg-body.jpg", [1, 2]],
    position: { //nested object literal
        "x": 40,
        "y": 300,
        offset: [{ top: 23 }]
    },
    onChange: function() { return !0 },
    pattern: /^bg-.+\.(?:png|jpe?g)$/i
};

var json = jQuery.stringify(myObject);
console.log(json);
10
jherax

はい。$ .ajaxを呼び出す前に、JSON.stringifyとJSON.parseを使用して "Json_PostData"を作成してください。

$.ajax({
        url:    post_http_site,  
        type: "POST",         
        data:   JSON.parse(JSON.stringify(Json_PostData)),       
        cache: false,
        error: function (xhr, ajaxOptions, thrownError) {
            alert(" write json item, Ajax error! " + xhr.status + " error =" + thrownError + " xhr.responseText = " + xhr.responseText );    
        },
        success: function (data) {
            alert("write json item, Ajax  OK");

        } 
});
10
bruce

それは基本的に2段階のプロセスです：

まず、このように文字列化する必要があります

var JSON_VAR = JSON.stringify(OBJECT_NAME, null, 2);

その後、文字列をObjectに変換する必要があります。

var obj = JSON.parse(JSON_VAR);
8
Shrish Shrivastava

上記の解決策が考慮に入れていないことの1つはあなたが入力の配列を持っているが1つの値だけが供給された場合です。

例えば、バックエンドがPeopleの配列を期待しているが、この特定のケースでは、あなたはただ一人の人物を扱っています。それから：

<input type="hidden" name="People" value="Joe" />

それから以前の解決策では、それはただのようなものに写像するでしょう：

{
    "People" : "Joe"
}

しかし、実際には

{
    "People" : [ "Joe" ]
}

それを修正するには、入力は次のようになります。

<input type="hidden" name="People[]" value="Joe" />

そして、あなたは次の関数を使うでしょう（他の解決策に基づいていますが、少し拡張した）

$.fn.serializeObject = function() {
var o = {};
var a = this.serializeArray();
$.each(a, function() {
    if (this.name.substr(-2) == "[]"){
        this.name = this.name.substr(0, this.name.length - 2);
        o[this.name] = [];
    }

    if (o[this.name]) {
        if (!o[this.name].Push) {
            o[this.name] = [o[this.name]];
        }
        o[this.name].Push(this.value || '');
    } else {
        o[this.name] = this.value || '';
    }
});
return o;
};
7
Tim Burkhart