Frage Konvertieren von Formulardaten in JavaScript-Objekte mit jQuery


Wie konvertiere ich alle Elemente meines Formulars in ein JavaScript-Objekt?

Ich möchte eine Möglichkeit haben, automatisch ein JavaScript-Objekt aus meinem Formular zu erstellen, ohne jedes Element durchlaufen zu müssen. Ich möchte keine Saite, wie sie zurückgegeben wird $('#formid').serialize();Ich möchte auch nicht, dass die Karte zurückgegeben wird $('#formid').serializeArray();


1437


Ursprung


Antworten:


serializeArray macht genau das schon. Sie müssen nur die Daten in Ihr gewünschtes Format einmassieren:

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;
}

Achten Sie auf versteckte Felder, die den gleichen Namen wie echte Eingaben haben, da sie überschrieben werden.


1541



Konvertieren von Formularen in JSON WIE EIN CHEF


Aktuelle Quelle ist eingeschaltet GitHub und Laube.

$ bower installiere jquery-serialize-object


Der folgende Code ist jetzt veraltet.

Der folgende Code kann mit allen Arten von Eingabe-Namen arbeiten; und behandeln sie genau so, wie Sie es erwarten.

Beispielsweise:

<!-- 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"
          }
        }
      }
    }
  }
}

Verwendung

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

Die Zauberei (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



Was ist falsch mit:

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

252



Eine feste Version der Lösung von Tobias Cohen. Dieser behandelt korrekt falsche Werte wie 0 und ''.

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;
};

Und eine CoffeeScript-Version für Ihre Codierung Komfort:

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



Ich mag es zu benutzen Array.prototype.reduce weil es ein One-Liner ist und nicht darauf angewiesen ist Underscore.js oder dergleichen:

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

Dies ist vergleichbar mit der Antwort mit Array.prototype.map, aber Sie müssen Ihren Bereich nicht mit einer zusätzlichen Objektvariable überladen. One-Stop-Shopping.

WICHTIGE NOTIZ: Formulare mit Eingaben, die dupliziert haben name Attribute sind gültiges HTML und tatsächlich ein gängiger Ansatz. Die Verwendung einer der Antworten in diesem Thread ist in diesem Fall nicht geeignet (da Objektschlüssel eindeutig sein müssen).


49



All diese Antworten schienen mir übertrieben. Es gibt etwas, das der Einfachheit halber gesagt werden muss. Solange alle Ihre Formulareingaben das Namensattribut haben, sollte dies nur jim dandy funktionieren.

$('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



Wenn Sie verwenden Underscore.js Sie können das relativ kurz verwenden:

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

24