serialize - recorrer array de objetos javascript




Convertir datos de formulario a objeto JavaScript con jQuery (20)

¿Cómo convierto todos los elementos de mi formulario a un objeto JavaScript?

Me gustaría tener alguna forma de crear automáticamente un objeto JavaScript desde mi formulario, sin tener que recorrer cada elemento. No quiero una cadena, como se devuelve por $('#formid').serialize(); , ni quiero que el mapa sea devuelto por $('#formid').serializeArray();


Con toda la respuesta dada hay algún problema que es ...

Si ingresa el nombre como matriz como name[key] , pero se generará así

 name:{
   key : value
 }

Por ejemplo: si tengo forma como esta.

    <form>
        <input name="name" value="value" >
        <input name="name1[key1]" value="value1" >
        <input name="name2[key2]" value="value2" >
        <input name="name3[key3]" value="value3" >
    </form>

Entonces generará un objeto como este con todas las respuestas dadas.

Object {
    name : 'value',
    name1[key1] : 'value1',
    name2[key2] : 'value2',
    name3[key3] : 'value3', 
}

Pero tiene que Generar como abajo, cualquiera quiere ser así como abajo.

Object {
    name : 'value',
    name1 : {
        key1 : 'value1'
    },
    name2 : {
        key2 : 'value2'
    },
    name3 : {
        key2 : 'value2'
    }
}

Entonces intente esto debajo del código js.

(function($){
    $.fn.getForm2obj = function(){
        var _ = {},_t=this;
        this.c = function(k,v){ eval("c = typeof "+k+";"); if(c == 'undefined') _t.b(k,v);}
        this.b = function(k,v,a = 0){ if(a) eval(k+".push("+v+");"); else eval(k+"="+v+";"); };
        $.map(this.serializeArray(),function(n){
            if(n.name.indexOf('[') > -1 ){
                var keys = n.name.match(/[a-zA-Z0-9_]+|(?=\[\])/g),le = Object.keys(keys).length,tmp = '_';
                $.map(keys,function(key,i){
                    if(key == ''){
                        eval("ale = Object.keys("+tmp+").length;");
                        if(!ale) _t.b(tmp,'[]');
                        if(le == (i+1)) _t.b(tmp,"'"+n['value']+"'",1);
                        else _t.b(tmp += "["+ale+"]",'{}');
                    }else{
                        _t.c(tmp += "['"+key+"']",'{}');
                        if(le == (i+1)) _t.b(tmp,"'"+n['value']+"'");
                    }
                });
            }else _t.b("_['"+n['name']+"']","'"+n['value']+"'");
        });
        return _;
    }
})(jQuery);
console.log($('form').getForm2obj());
<!DOCTYPE html><html><head>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <title>Convert form data to JavaScript object with jQuery</title>
</head>
<body>
    <form>
        <input name="name" value="value" >
        <input name="name1[key1]" value="value1" >
        <input name="name2[key2]" value="value2" >
        <input name="name3[key3]" value="value3" >
        <input type="checkbox" name="name4[]" value="1" checked="checked">
        <input type="checkbox" name="name4[]" value="2">
        <input type="checkbox" name="name4[]" value="3">
    </form>
</body></html>


Convertir formularios a JSON LIKE A BOSS

La fuente actual está en GitHub y Bower.

$ bower install jquery-serialize-object

El siguiente código ahora está en desuso .

El siguiente código puede funcionar con todo tipo de nombres de entrada; y manéjalos como lo esperas.

Por ejemplo:

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

Uso

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

La brujería (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);

De alguna respuesta older :

$('form input,select').toArray().reduce(function(m,e){m[e.name] = $(e).val(); return m;},{})

Encontré un problema con el código de Tobias Cohen (no tengo suficientes puntos para comentarlo directamente), que de lo contrario funciona para mí. Si tiene dos opciones de selección con el mismo nombre, ambas con valor = "", el código original producirá "nombre": "" en lugar de "nombre": ["", ""]

Creo que esto se puede solucionar agregando "|| o [this.name] == ''" a la primera condición if:

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] || 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;
};


He encontrado un problema con la solución seleccionada.

Cuando se usan formularios que tienen nombres basados ​​en matrices, la función jQuery serializeArray () realmente muere.

Tengo un marco de trabajo de PHP que utiliza nombres de campo basados ​​en matrices para permitir que el mismo formulario se coloque en la misma página varias veces en varias vistas. Esto puede ser útil para agregar, editar y eliminar en la misma página sin modelos de formularios en conflicto.

Como quería seralizar los formularios sin tener que eliminar esta funcionalidad de base absoluta, decidí escribir mi propio seralizeArray ():

        var $vals = {};

        $("#video_edit_form input").each(function(i){
            var name = $(this).attr("name").replace(/editSingleForm\[/i, '');

            name = name.replace(/\]/i, '');

            switch($(this).attr("type")){
                case "text":
                    $vals[name] = $(this).val();
                    break;
                case "checkbox":
                    if($(this).attr("checked")){
                        $vals[name] = $(this).val();
                    }
                    break;
                case "radio":
                    if($(this).attr("checked")){
                        $vals[name] = $(this).val();
                    }
                    break;
                default:
                    break;
            }
        });

Tenga en cuenta: esto también funciona fuera del formulario submit (), por lo que si ocurre un error en el resto de su código, el formulario no se enviará si coloca en un botón de enlace que dice "guardar cambios".

También tenga en cuenta que esta función nunca debe usarse para validar el formulario solo para recopilar los datos que se enviarán al servidor para su validación. El uso de un código tan débil y asignado en masa provocará XSS , etc.


La simplicidad es mejor aquí. He usado una simple cadena de reemplazo con una expresión regular, y hasta ahora han funcionado como un encanto. No soy un experto en expresiones regulares, pero apuesto a que incluso puedes poblar objetos muy complejos.

var values = $(this).serialize(),
attributes = {};

values.replace(/([^&]+)=([^&]*)/g, function (match, name, value) {
    attributes[name] = value;
});

Me gusta usar Array.prototype.reduce porque es de una sola línea, y no se basa en Underscore.js o similares:

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

Esto es similar a la respuesta que utiliza Array.prototype.map , pero no necesita saturar su alcance con una variable de objeto adicional. Uno para de comprar.

NOTA IMPORTANTE : los formularios con entradas que tienen atributos de name duplicado son HTML válido y en realidad es un enfoque común. El uso de cualquiera de las respuestas en este hilo no será apropiado en ese caso (ya que las claves de los objetos deben ser únicas).


One-liner (sin dependencias distintas de jQuery), utiliza el enlace de objetos fijos para la función pasada al método de map .

$('form').serializeArray().map(function(x){this[x.name] = x.value; return this;}.bind({}))[0]

¿Que hace?

"id=2&value=1&comment=ok" => Object { id: "2", value: "1", comment: "ok" }

adecuado para aplicaciones web progresivas (se puede admitir fácilmente tanto la acción de envío de formularios regular como las solicitudes ajax)


Prefiero este enfoque porque: no tiene que recorrer más de 2 colecciones, puede obtener otras cosas que no sean "nombre" y "valor" si es necesario, y puede sanear sus valores antes de almacenarlos en el objeto ( si tiene valores predeterminados que no desea almacenar, por ejemplo).

$.formObject = function($o) {
    var o = {},
        real_value = function($field) {
            var val = $field.val() || "";

            // additional cleaning here, if needed

            return val;
        };

    if (typeof o != "object") {
        $o = $(o);
    }

    $(":input[name]", $o).each(function(i, field) {
        var $field = $(field),
            name = $field.attr("name"),
            value = real_value($field);

        if (o[name]) {
            if (!$.isArray(o[name])) {
                o[name] = [o[name]];
            }

            o[name].push(value);
        }

        else {
            o[name] = value;
        }
    });

    return o;
}

Utilizar como tal:

var obj = $.formObject($("#someForm"));

Solo probado en Firefox.


Qué hay de malo en:

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

Realmente no hay manera de hacer esto sin examinar cada uno de los elementos. Lo que realmente quiere saber es "¿alguien ya ha escrito un método que convierte un formulario en un objeto JSON?" Debería funcionar algo como lo siguiente: tenga en cuenta que solo le proporcionará los elementos de formulario que se devolverían mediante un POST (debe tener un nombre). Esto no está probado .

function formToJSON( selector )
{
     var form = {};
     $(selector).find(':input[name]:enabled').each( function() {
         var self = $(this);
         var name = self.attr('name');
         if (form[name]) {
            form[name] = form[name] + ',' + self.val();
         }
         else {
            form[name] = self.val();
         }
     });

     return form;
}

Todas estas respuestas me parecieron tan exageradas. Hay algo que decir para la simplicidad. Siempre que todas las entradas de su formulario tengan el nombre de atributo establecido, esto debería funcionar solo 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?)
});

Una versión fija de la solución de Tobias Cohen. Este maneja correctamente los valores falsos como 0 y '' .

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

Y una versión de CoffeeScript para su conveniencia de codificación:

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

Utilizar:

function form_to_json (selector) {
  var ary = $(selector).serializeArray();
  var obj = {};
  for (var a = 0; a < ary.length; a++) obj[ary[a].name] = ary[a].value;
  return obj;
}

Salida:

{"myfield": "myfield value", "passwordfield": "mypasswordvalue"}

serializeArray ya hace exactamente eso. Solo necesita masajear los datos en su formato requerido:

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

Tenga cuidado con los campos ocultos que tienen el mismo nombre que las entradas reales, ya que se sobrescribirán.


No usaría esto en un sitio en vivo debido a los ataques XSS y probablemente muchos otros problemas, pero aquí hay un ejemplo rápido de lo que podrías hacer:

$("#myform").submit(function(){
    var arr = $(this).serializeArray();
    var json = "";
    jQuery.each(arr, function(){
        jQuery.each(this, function(i, val){
            if (i=="name") {
                json += '"' + val + '":';
            } else if (i=="value") {
                json += '"' + val.replace(/"/g, '\\"') + '",';
            }
        });
    });
    json = "{" + json.substring(0, json.length - 1) + "}";
    // do something with json
    return false;
});

Otra respuesta

document.addEventListener("DOMContentLoaded", function() {
  setInterval(function() {
    var form = document.getElementById('form') || document.querySelector('form[name="userprofile"]');
    var json = Array.from(new FormData(form)).map(function(e,i) {this[e[0]]=e[1]; return this;}.bind({}))[0];
    
    console.log(json)
    document.querySelector('#asJSON').value = JSON.stringify(json);
  }, 1000);
})
<form name="userprofile" id="form">
  <p>Name <input type="text" name="firstname" value="John"/></p>
  <p>Family name <input name="lastname" value="Smith"/></p>
  <p>Work <input name="employment[name]" value="inc, Inc."/></p>
  <p>Works since <input name="employment[since]" value="2017" /></p>
  <p>Photo <input type="file" /></p>
  <p>Send <input type="submit" /></p>
</form>

JSON: <textarea id="asJSON"></textarea>

FormData: https://developer.mozilla.org/en-US/docs/Web/API/FormData


Me gusta la versión de samuels, pero creo que tiene un pequeño error. Normalmente JSON se envía como

{"coreSKU": "PCGUYJS", "name_de": "lo que sea", ...

NO como

[{"coreSKU": "PCGUYJS"}, {"name_de": "lo que sea"}, ...

por lo que la función IMO debería leer:

App.toJson = function( selector ) {
    var o = {};
    $.map( $( selector ), function( n,i )
    {
        o[n.name] = $(n).val();
    });     
    return o;
}

y para envolverlo en la matriz de datos (como también se espera comúnmente), y finalmente enviarlo como astring App.stringify ({data: App.toJson ('#cropform: input')})

Para ver el texto de la pregunta 3593046 para la versión magra, en json2.js para la versión json2.js por cada eventualidad. Eso debería cubrirlo todo :)


Para una solución rápida y moderna, use el complemento JSONify jQuery. El ejemplo a continuación se toma textualmente del GitHub README. Todo el mérito a Kushal Pandya, autor del complemento.

Dado:

<form id="myform">
    <label>Name:</label>
    <input type="text" name="name"/>
    <label>Email</label>
    <input type="text" name="email"/>
    <label>Password</label>
    <input type="password" name="password"/>
</form>

Corriendo:

$('#myform').jsonify();

Produce:

{"name":"Joe User","email":"[email protected]","password":"mypass"}

Si quieres hacer un POST de jQuery con este objeto JSON:

$('#mybutton').click(function() {
    $.post('/api/user', JSON.stringify($('#myform').jsonify()));
}




serialization