web-dev-qa-db-fra.com

Sérialisation vers JSON dans jQuery

J'ai besoin de sérialiser un objet à JSON . J'utilise jQuery . Existe-t-il un moyen "standard" de procéder?

Ma situation spécifique: j'ai un tableau défini comme indiqué ci-dessous:

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

et je dois transformer cela en une chaîne de caractères à transmettre à $.ajax() comme ceci:

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

JSON-js - JSON en JavaScript.

Pour convertir un objet en chaîne, utilisez JSON.stringify:

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

Pour convertir une chaîne JSON en objet, utilisez JSON.parse:

var your_object = JSON.parse(json_text);

Il a été récemment recommandé par John Resig :

... S'IL VOUS PLAÎT, commencez à migrer vos applications utilisant JSON vers le fichier json2.js de Crockford. Il est entièrement compatible avec la spécification ECMAScript 5 et se dégrade gracieusement si une implémentation native (plus rapide!) Existe.

En fait, je viens d’arriver hier un changement dans jQuery qui utilise la méthode JSON.parse si elle existe, maintenant que cela a été complètement spécifié.

J'ai tendance à croire ce qu'il dit sur les questions JavaScript :)

Tous les navigateurs modernes (et beaucoup d'anciens qui ne sont pas anciens) supporte le objet JSON en natif. La version actuelle de la bibliothèque JSON de Crockford définira uniquement JSON.stringify et JSON.parse si elles ne le sont pas déjà, laissant ainsi toute implémentation native du navigateur.

1124
user18015

J'utilise jquery-json depuis 6 mois et cela fonctionne très bien. C'est très simple à utiliser:

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

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

Fonctionne sur IE8 +

Pas besoin de jQuery, utilisez:

JSON.stringify(countries);
96
pestatije

Je ne l'ai pas utilisé mais vous voudrez peut-être essayer le plugin jQuery écrit par Mark Gibson

Il ajoute les deux fonctions: $.toJSON(value), $.parseJSON(json_str, [safe]).

45
Tahir Akhtar

Non, la méthode standard de sérialisation en JSON consiste à utiliser une bibliothèque de sérialisation JSON existante. Si vous ne souhaitez pas faire cela, vous devrez écrire vos propres méthodes de sérialisation.

Si vous souhaitez des conseils sur la manière de procéder, je vous suggérerais d’examiner la source de certaines des bibliothèques disponibles.

EDIT: Je ne vais pas dire que l'écriture de vos propres méthodes de sérialisation est mauvaise, mais vous devez considérer que s'il est important pour votre application d'utiliser JSON bien formé, alors vous devez évaluez les frais généraux liés à "une dépendance de plus" par rapport à la possibilité que vos méthodes personnalisées rencontrent un jour un cas d'échec que vous n'aviez pas anticipé. Votre appel est de savoir si ce risque est acceptable.

35
Adam Bellaire

J'ai trouvé ça quelque part. Je ne me souviens plus où ... probablement sur 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

Si vous ne souhaitez pas utiliser de bibliothèques externes, la méthode JavaScript native est .toSource(), mais elle n'est pas parfaitement compatible avec tous les navigateurs.

11
Kain Haart

Le meilleur moyen est d'inclure le polyfill pour l'objet JSON .

Mais si vous insistez pour créer une méthode de sérialisation d'un objet en notation JSON ( valeurs valides pour JSON ) à l'intérieur de l'espace de noms jQuery, vous pouvez procéder de la manière suivante:

La mise en oeuvre

// 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));

Usage

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

Oui, vous devriez JSON.stringify et JSON.parse votre Json_PostData avant d'appeler $.ajax:

$.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

C'est essentiellement un processus en 2 étapes:

D'abord, vous devez strider comme ceci

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

Après cela, vous devez convertir la chaîne en objet.

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

Une chose que les solutions ci-dessus ne prennent pas en compte est si vous avez un tableau d'entrées mais qu'une seule valeur a été fournie.

Par exemple, si le serveur final attend un groupe de personnes, mais dans ce cas particulier, vous ne faites affaire qu'avec une seule personne. Puis faire:

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

Ensuite, avec les solutions précédentes, il suffirait de mapper quelque chose comme:

{
    "People" : "Joe"
}

Mais il faut vraiment mapper à

{
    "People" : [ "Joe" ]
}

Pour résoudre ce problème, l'entrée devrait ressembler à ceci:

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

Et vous utiliseriez la fonction suivante (basée sur d’autres solutions, mais étendue un peu)

$.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