jQuery serializeArray() pares de valores clave

Question

Estoy teniendo un poco de problemas serializar un formulario

<form> 
    <input type="text" name="name1" value="value1"/> 
    <input type="text" name="name2" value="value2"/> 
</form> 

$(form).serializeArray() 

Volverá [{name:"name1",value:"value1"},{name:"name2",value:"value2"}] pares.

¿Es posible obtener una salida en forma

{name1:value1,name2:value2} 

Para que sean más fáciles de manejar?

Answer 1

var result = { }; 
$.each($('form').serializeArray(), function() { 
    result[this.name] = this.value; 
}); 

// at this stage the result object will look as expected so you could use it 
alert('name1 = ' + result.name1 + ', name2 = ' + result.name2); 

Live demo.

Answer 2

new_obj = {} 

$.each($(form).serializeArray(), function(i, obj) { new_obj[obj.name] = obj.value }) 

los datos están en new_obj

Answer 3

La respuesta aceptada funciona muy bien si el formulario no tiene casillas o botones. Como todos los grupos tienen el mismo atributo de nombre, necesita crear un valor de matriz dentro del objeto. Así que para HTML como:

<input type="checkbox" value="1" name="the-checkbox"> 
<input type="checkbox" value="1" name="the-checkbox"> 
<input type="checkbox" value="1" name="the-checkbox"> 

Usted obtendrá:

{the-checkbox:['1', '2', '3']} 

This poco de código se ocupa de todo muy bien.

/*! 
* jQuery serializeObject - v0.2 - 1/20/2010 
* http://benalman.com/projects/jquery-misc-plugins/ 
* 
* Copyright (c) 2010 "Cowboy" Ben Alman 
* Dual licensed under the MIT and GPL licenses. 
* http://benalman.com/about/license/ 
*/ 

// Whereas .serializeArray() serializes a form into an array, .serializeObject() 
// serializes a form into an (arguably more useful) object. 

(function($,undefined){ 
    '$:nomunge'; // Used by YUI compressor. 

    $.fn.serializeObject = function(){ 
    var obj = {}; 

    $.each(this.serializeArray(), function(i,o){ 
     var n = o.name, 
     v = o.value; 

     obj[n] = obj[n] === undefined ? v 
      : $.isArray(obj[n]) ? obj[n].concat(v) 
      : [ obj[n], v ]; 
    }); 

    return obj; 
    }; 

})(jQuery); 

Uso

$(form).serializeObject(); 

Answer 4

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

Answer 5

Aquí es un poco de modernización del código Hollister 's.

(function($,undefined){ 
    '$:nomunge'; // Used by YUI compressor. 

    $.fn.serializeObject = function(){ 
    var obj = {}, 
     names = {}; 

    $.each(this.serializeArray(), function(i,o){ 
     var n = o.name, 
     v = o.value; 

     if (n.includes('[]')) { 
      names.n = !names.n ? 1 : names.n+1; 
      var indx = names.n - 1; 
      n = n.replace('[]', '[' + indx + ']'); 
     } 

     obj[n] = obj[n] === undefined ? v 
      : $.isArray(obj[n]) ? obj[n].concat(v) 
      : [ obj[n], v ]; 
    }); 

    return obj; 
    }; 

})(jQuery); 

en caso de tener nombres de campo como myvar[] de casillas de verificación.

Answer 6

Puede hacer una función personalizada.

var complex = $(form).serialize(); // name1=value1&name2=value2 
var json = toSimpleJson(complex); // {"name1":"value1", "name2":"value2"} 

function toSimpleJson(serializedData) { 
    var ar1 = serializedData.split("&"); 
    var json = "{"; 
    for (var i = 0; i<ar1.length; i++) { 
     var ar2 = ar1[i].split("="); 
     json += i > 0 ? ", " : ""; 
     json += "\"" + ar2[0] + "\" : "; 
     json += "\"" + (ar2.length < 2 ? "" : ar2[1]) + "\""; 
    } 
    json += "}"; 
    return json; 
} 

Answer 7

Dé su forma un id (forma-id)

var jsoNform = $("#form-id").serializeObject(); 

jQuery.fn.serializeObject = function() { 
    var formData = {}; 
    var formArray = this.serializeArray(); 
    for (var i = 0, n = formArray.length; i < n; ++i) 
     formData[formArray[i].name] = formArray[i].value; 
    return formData; 
};