Question Convertir des données de formulaire en objet JavaScript avec jQuery


Comment convertir tous les éléments de mon formulaire en objet JavaScript?

Je voudrais avoir un moyen de construire automatiquement un objet JavaScript à partir de mon formulaire, sans avoir à boucler chaque élément. Je ne veux pas de chaîne, comme retourné par $('#formid').serialize();, et je ne veux pas non plus que la carte soit retournée $('#formid').serializeArray();


1437


origine


Réponses:


serializeArray fait déjà exactement cela. Vous avez juste besoin de masser les données dans votre format requis:

function objectifyForm(formArray) {//serialize data function

  var returnArray = {};
  for (var i = 0; i < formArray.length; i++){
    returnArray[formArray[i]['name']] = formArray[i]['value'];
  }
  return returnArray;
}

Attention aux champs cachés qui ont le même nom que les entrées réelles car ils seront écrasés.


1541



Convertir des formes à JSON COMME UN BOSS


La source actuelle est sur GitHub et bower.

$ bower installer jquery-serialize-object


Le code suivant est maintenant déconseillé.

Le code suivant peut prendre du travail avec toutes sortes de noms d'entrée; et manipulez-les comme vous l'attendez.

Par exemple:

<!-- all of these will work! -->
<input name="honey[badger]" value="a">
<input name="wombat[]" value="b">
<input name="hello[panda][]" value="c">
<input name="animals[0][name]" value="d">
<input name="animals[0][breed]" value="e">
<input name="crazy[1][][wonky]" value="f">
<input name="dream[as][vividly][as][you][can]" value="g">
// output
{
  "honey":{
    "badger":"a"
  },
  "wombat":["b"],
  "hello":{
    "panda":["c"]
  },
  "animals":[
    {
      "name":"d",
      "breed":"e"
    }
  ],
  "crazy":[
    null,
    [
      {"wonky":"f"}
    ]
  ],
  "dream":{
    "as":{
      "vividly":{
        "as":{
          "you":{
            "can":"g"
          }
        }
      }
    }
  }
}

Usage

$('#my-form').serializeObject();

La Sorcellerie (JavaScript)

(function($){
    $.fn.serializeObject = function(){

        var self = this,
            json = {},
            push_counters = {},
            patterns = {
                "validate": /^[a-zA-Z][a-zA-Z0-9_]*(?:\[(?:\d*|[a-zA-Z0-9_]+)\])*$/,
                "key":      /[a-zA-Z0-9_]+|(?=\[\])/g,
                "push":     /^$/,
                "fixed":    /^\d+$/,
                "named":    /^[a-zA-Z0-9_]+$/
            };


        this.build = function(base, key, value){
            base[key] = value;
            return base;
        };

        this.push_counter = function(key){
            if(push_counters[key] === undefined){
                push_counters[key] = 0;
            }
            return push_counters[key]++;
        };

        $.each($(this).serializeArray(), function(){

            // skip invalid keys
            if(!patterns.validate.test(this.name)){
                return;
            }

            var k,
                keys = this.name.match(patterns.key),
                merge = this.value,
                reverse_key = this.name;

            while((k = keys.pop()) !== undefined){

                // adjust reverse_key
                reverse_key = reverse_key.replace(new RegExp("\\[" + k + "\\]$"), '');

                // push
                if(k.match(patterns.push)){
                    merge = self.build([], self.push_counter(reverse_key), merge);
                }

                // fixed
                else if(k.match(patterns.fixed)){
                    merge = self.build([], k, merge);
                }

                // named
                else if(k.match(patterns.named)){
                    merge = self.build({}, k, merge);
                }
            }

            json = $.extend(true, json, merge);
        });

        return json;
    };
})(jQuery);

406



Quel est le problème avec:

var data = {};
$(".form-selector").serializeArray().map(function(x){data[x.name] = x.value;}); 

252



Une version corrigée de la solution de Tobias Cohen. Celui-ci gère correctement les valeurs falsifiées comme 0 et ''.

jQuery.fn.serializeObject = function() {
  var arrayData, objectData;
  arrayData = this.serializeArray();
  objectData = {};

  $.each(arrayData, function() {
    var value;

    if (this.value != null) {
      value = this.value;
    } else {
      value = '';
    }

    if (objectData[this.name] != null) {
      if (!objectData[this.name].push) {
        objectData[this.name] = [objectData[this.name]];
      }

      objectData[this.name].push(value);
    } else {
      objectData[this.name] = value;
    }
  });

  return objectData;
};

Et une version CoffeeScript pour votre commodité de programmation:

jQuery.fn.serializeObject = ->
  arrayData = @serializeArray()
  objectData = {}

  $.each arrayData, ->
    if @value?
      value = @value
    else
      value = ''

    if objectData[@name]?
      unless objectData[@name].push
        objectData[@name] = [objectData[@name]]

      objectData[@name].push value
    else
      objectData[@name] = value

  return objectData

96



J'aime utiliser Array.prototype.reduce parce que c'est un one-liner, et ça ne dépend pas de Underscore.js ou semblable:

$('#formid').serializeArray()
    .reduce(function(a, x) { a[x.name] = x.value; return a; }, {});

Ceci est similaire à la réponse en utilisant Array.prototype.map, mais vous n'avez pas besoin d'encombrer votre portée avec une variable d'objet supplémentaire. Un guichet unique.

NOTE IMPORTANTE: Formulaires avec des entrées qui ont un doublon name Les attributs sont HTML valide, et sont en fait une approche commune. L'utilisation de l'une des réponses dans ce fil sera inappropriée dans ce cas (puisque les clés d'objets doivent être uniques).


49



Toutes ces réponses me semblaient tellement exagérées. Il y a quelque chose à dire pour la simplicité. Tant que toutes les entrées de votre formulaire ont l'attribut name défini, cela devrait fonctionner juste jim dandy.

$('form.myform').submit(function () {
  var $this = $(this)
    , viewArr = $this.serializeArray()
    , view = {};

  for (var i in viewArr) {
    view[viewArr[i].name] = viewArr[i].value;
  }

  //Do stuff with view object here (e.g. JSON.stringify?)
});

28



Si vous utilisez Underscore.js vous pouvez utiliser le relativement concis:

_.object(_.map($('#myform').serializeArray(), _.values))

24