web-dev-qa-db-fra.com

Comment convertir des données jQuery.serialize () en objet JSON?

Existe-t-il une meilleure solution pour convertir des données de formulaire déjà sérialisées par la fonction jQuery serialize (), lorsque le formulaire contient plusieurs champs Array en entrée. Je veux pouvoir convertir les données de formulaire en un objet JSON pour recréer d'autres tables informatives. Dites-moi donc un meilleur moyen de convertir la chaîne de sérialisation en objet JSON.

<form id='sampleform'>
    <input name='MyName' type='text' /> // Raf

    <!--array input fields below-->
    <input name='friendname[]' type='text' /> // Bily
    <input name='fiendemail[]' type='text' /> // [email protected]

    <!--duplicated fields below to add more friends -->
    <input name='friendname[]' type='text' /> // Andy
    <input name='fiendemail[]' type='text' /> // [email protected]

    <input name='friendname[]' type='text' /> // Adam
    <input name='fiendemail[]' type='text' /> // [email protected]
</form>

La méthode jQuery appliquée pour obtenir les données

var MyForm = $("#sampleform").serialize();
/** result : MyName=Raf&friendname[]=Billy&fiendemail[][email protected]&friendname[]=Andy&fiendemail[][email protected]&friendname[]=Adam&fiendemail[][email protected]
*/

comment puis-je créer ces données dans un objet JSON? qui devrait avoir les exemples de données JSON suivants du formulaire ci-dessus.

{
    "MyName":"raf",
    "friendname":[
        {"0":"Bily"},
        {"1":"Andy"},
        {"2":"Adam"}
    ],
    "friendemail":[
        {"0":"[email protected]"},
        {"1":"[email protected]"},
        {"2":"[email protected]"}
    ]
}
javascriptjqueryjsonserialization
42
Raftalks
var formdata = $("#myform").serializeArray();
var data = {};
$(formdata ).each(function(index, obj){
    data[obj.name] = obj.value;
});

Simple et rapide;)

40
Danilo Colasso

J'ai récemment eu ce problème exact. Initialement, nous utilisions la méthode serializeArray() de jQuery, mais cela n'inclut pas les éléments de formulaire désactivés. Nous allons souvent désactiver les éléments de formulaire qui sont "synchronisés" avec d'autres sources sur la page, mais nous devons néanmoins inclure les données dans notre objet sérialisé. Donc, serializeArray() est sorti. Nous avons utilisé le sélecteur :input pour obtenir tous les éléments d'entrée (activés et désactivés) dans un conteneur donné, puis $.map() pour créer notre objet.

var inputs = $("#container :input");
var obj = $.map(inputs, function(n, i)
{
    var o = {};
    o[n.name] = $(n).val();
    return o;
});
console.log(obj);

Notez que pour que cela fonctionne, chacune de vos entrées aura besoin d'un attribut name, qui sera le nom de la propriété de l'objet résultant.

C'est en fait légèrement modifié par rapport à ce que nous avons utilisé. Nous avions besoin de créer un objet structuré comme un IDictionary .NET, nous avons donc utilisé ceci: (Je le fournis ici au cas où cela serait utile)

var obj = $.map(inputs, function(n, i)
{
    return { Key: n.name, Value: $(n).val() };
});
console.log(obj);

J'aime ces deux solutions, car elles constituent de simples utilisations de la fonction $.map() et que vous avez le contrôle total sur votre sélecteur (ainsi, quels éléments vous avez fini par inclure dans l'objet résultant). En outre, aucun plugin supplémentaire requis. Plaine vieux jQuery.

12
Samuel Meacham

Utilisez le fichier jQuery.serializeJSON plugin . Il convertit les formulaires en utilisant le même format que celui utilisé dans un objet Rails params, très standard et bien testé.

7
tothemario

J'utilise ce très petit plugin jQuery, que j'ai étendu à partir de DocumentCloud:

https://github.com/documentcloud/documentcloud/blob/master/public/javascripts/lib/jquery_extensions.js

Il s'agit essentiellement de deux lignes de code, mais elles nécessitent _.js (Underscore.js) car elles sont basées sur une fonction reduce.

$.fn.extend({
  serializeJSON: function(exclude) {
    exclude || (exclude = []);
    return _.reduce(this.serializeArray(), function(hash, pair) {
      pair.value && !(pair.name in exclude) && (hash[pair.name] = pair.value);
      return hash;
    }, {});
  }
});

Extensions:

  • Il ne sérialise pas une valeur d'entrée si elle est nulle
  • Il peut exclure certaines entrées en transmettant un tableau de noms d'entrées à l'argument exclude de i.e. ["password_confirm"].
5
S.C.

Une solution équivalente à Danilo Colasso , avec les mêmes avantages et inconvénients de .serializeArray() (elle utilise fondamentalement .reduce au lieu de $.each).

Avec peu d'effort, cela permet d'implémenter les fonctionnalités supplémentaires dans les réponses de S.C. sans nécessiter d'extensions.

$(selector).serializeArray()
    .reduce(function(accum, item) {
        // This 'if' allows ignoring some values
        if (-1 === [ 'ignoreThis', 'andThat' ].indexOf(item.name)) {
            // This allows ignoring NULL values
            if (item.value !== null) {
                accum[item.name] = item.value;
            }
        }
        return accum;
    },
    {
        // By supplying some initial values, we can add defaults
        // for, say, disabled form controls.
        preFilledName:  preFilledValue, // optional
        defaultName  :  defaultValue    // optional
    }
);
4
LSerni

Utiliser le trait de soulignement et jQuery 

var formdata = $("#myform").serializeArray();
var data = {};
_.each(formdata, function(element){
// Return all of the values of the object's properties.
  var value = _.values(element);
// name : value 
  data[value[0]] = value[1];
});
console.log(data); //Example => {name:"alex",lastname:"amador"}
2
alejandro

Je pense qu’il ya beaucoup de bonnes réponses ici et j’ai créé ma propre fonction sur la base de ces réponses.

function formToJSON(f) {
    var fd = $(f).serializeArray();
    var d = {};
    $(fd).each(function() {
        if (d[this.name] !== undefined){
            if (!Array.isArray(d[this.name])) {
                d[this.name] = [d[this.name]];
            }
            d[this.name].Push(this.value);
        }else{
            d[this.name] = this.value;
        }
    });
    return d;
}

//The way to use it :
$('#myForm').submit(function(){
    var datas = formToJSON(this);
    return false;
});

Laissez-moi vous expliquer en gros pourquoi je préfère cette solution .... Si vous avez plusieurs entrées avec le même nom, toutes les valeurs seront stockées dans un tableau, mais si ce n’est pas le cas, la valeur sera stockée directement comme valeur de l’index. dans le JSON ... C'est là que c'est différent de La réponse de Danilo Colasso où le JSON renvoyé est uniquement basé sur des valeurs de tableau ...

Donc si vous avez un formulaire avec une zone de texte nommée content et des multiples authors, cette fonction vous rendra: 

{
    content : 'This is The Content',
    authors : 
        [
            0: 'me',
            1: 'you',
            2: 'him',
        ]
}
1
Simon Trichereau
var formdata = $("#myform").serializeArray();

var data = {};

$(formdata ).each(function(index, obj){

         if(data[obj.name] === undefined)
              data[obj.name] = [];

          data[obj.name].Push(obj.value);

});
1
Deepak Bansode

si vous utilisez des requêtes ajax alors inutile de le faire json-object uniquement $('#sampleform').serialize() fonctionne parfaitement ou si vous avez un autre objectif, voici ma solution:

var formserializeArray = $("#sampleform").serializeArray();   
var jsonObj = {};
jQuery.map(formserializeArray , function (n, i) {
    jsonObj[n.name] = n.value;
});
0
Haritsinh Gohil