javascript - print - ¿Cómo convertir datos jQuery.serialize() al objeto JSON?

serialize table jquery

Question

¿Hay alguna mejor solución para convertir un formulario de datos que ya está serializado por jQuery function serialize (), cuando el formulario contiene múltiples campos de matriz de entrada. Quiero poder convertir los datos del formulario en un objeto JSON para recrear algunas otras tablas informativas. Así que díganme una mejor manera de convertir la cadena serializada en un objeto 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>

El método jquery aplicado para obtener los datos

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

¿Cómo hago estos datos en un objeto JSON? que debería tener el siguiente ejemplo de datos JSON del formulario anterior.

{
    "MyName":"raf",
    "friendname":[
        {"0":"Bily"},
        {"1":"Andy"},
        {"2":"Adam"}
    ],
    "friendemail":[
        {"0":"[email protected]"},
        {"1":"[email protected]"},
        {"2":"[email protected]"}
    ]
}

Answer 1

Creo que hay muchas buenas respuestas aquí, e hice mi propia función basada en estas respuestas.

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

Bueno, permítame explicarle básicamente por qué prefiero esta solución ... Si tiene múltiples entradas con el mismo nombre, todos los valores se almacenarán en una matriz pero si no, el valor se almacenará directamente como el valor del índice en el JSON ... Aquí es donde es diferente de la respuesta de Danilo Colasso, donde el JSON devuelto solo se basa en valores de matriz ...

Por lo tanto, si tiene un Formulario con un área de texto llamado contenido y autores múltiples, esta función le devolverá:

{
    content : ''This is The Content'',
    authors : 
        [
            0: ''me'',
            1: ''you'',
            2: ''him'',
        ]
}

Answer 2

Estoy usando este pequeño plugin jQuery, que he extendido desde DocumentCloud:

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

Básicamente se trata de dos líneas de código, pero requiere _.js (Underscore.js), ya que se basa en una función de 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;
    }, {});
  }
});

Extensiones:

• No serializa un valor de entrada si es nulo
• Puede excluir algunas entradas pasando una matriz de nombres de entrada al argumento exclude ie ["password_confirm"]

Answer 3

Recientemente tuve este problema exacto. Inicialmente, estábamos usando el método serializeArray() jQuery, pero eso no incluye los elementos del formulario que están deshabilitados. A menudo deshabilitaremos los elementos del formulario que están "sincronizados" con otras fuentes en la página, pero aún necesitamos incluir los datos en nuestro objeto serializado. Entonces serializeArray() está fuera. Usamos el selector de :input para obtener todos los elementos de entrada (tanto habilitados como deshabilitados) en un contenedor dado, y luego $.map() para crear nuestro objeto.

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

Tenga en cuenta que para que esto funcione, cada una de sus entradas necesitará un atributo de name , que será el nombre de la propiedad del objeto resultante.

Eso es en realidad un poco modificado de lo que usamos. Necesitábamos crear un objeto que estuviera estructurado como .ID IDictionary, así que usamos esto: (Lo proporciono aquí en caso de que sea útil)

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

Me gustan estas dos soluciones, porque son usos simples de la función $.map() , y usted tiene control total sobre su selector (entonces, qué elementos termina incluyendo en su objeto resultante). Además, no se requiere un complemento adicional. Llanura de jQuery.

Answer 4

Una solución equivalente a la de Danilo Colasso , con las ventajas y desventajas de .serializeArray() (básicamente usa .reduce lugar de $.each ).

Con poco esfuerzo, permite implementar las funciones adicionales en las respuestas de SC sin requerir extensiones.

$(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
    }
);

Answer 5

Use el plugin github.com/marioizquierdo/jquery.serializeJSON . Convierte formularios utilizando el mismo formato que encontraría en un objeto params Rails, que es muy estándar y está bien probado.

Answer 6

Uso de subrayado y 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"}

Answer 7

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

});

Answer 8

var formdata = $("#myform").serializeArray();
var data = {};
$(formdata ).each(function(index, obj){
    data[obj.name] = obj.value;
});

Simple y rápido;)