recorrer - object to string javascript
Convertir datos de formulario a objeto JavaScript con jQuery (30)
¿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);
Últimamente tuve el mismo problema y salí con este complemento .toJSON jQuery que convierte un formulario en un objeto JSON con la misma estructura. Esto también es especialmente útil para formularios generados dinámicamente donde desea que su usuario agregue más campos en lugares específicos.
El punto es que es posible que desee crear un formulario para que tenga una estructura propia, así que digamos que desea crear un formulario donde el usuario inserta sus lugares favoritos en la ciudad: puede imaginar que este formulario representa a <places>...</places> Elemento XML que contiene una lista de lugares que le gustan al usuario, por lo tanto una lista de elementos <place>...</place> que contienen, por ejemplo, un elemento <name>...</name> , un <type>...</type> y luego una lista de elementos <activity>...</activity> para representar las actividades que puede realizar en un lugar así. Entonces tu estructura XML sería así:
<places>
<place>
<name>Home</name>
<type>dwelling</type>
<activity>sleep</activity>
<activity>eat</activity>
<activity>watch TV</activity>
</place>
<place>...</place>
<place>...</place>
</places>
Qué bueno sería tener un objeto JSON fuera de esto que representaría esta estructura exacta para que puedas:
- Almacene este objeto como está en cualquier base de datos similar a CouchDB
- Léalo desde el lado del servidor de $ _POST [] y recupere una matriz correctamente anidada que luego puede manipular semánticamente
- Use algún script del lado del servidor para convertirlo en un archivo XML bien formado (incluso si no conoce su estructura exacta a priori)
- Simplemente, de alguna manera, utilícelo como está en cualquier script de servidor similar a Node.js
Bien, ahora debemos pensar cómo un formulario puede representar un archivo XML.
Por supuesto, la <form>etiqueta es la root, pero luego tenemos ese <place>elemento que es un contenedor y no un elemento de datos en sí, por lo que no podemos usar una etiqueta de entrada para ella.
Aquí es donde la <fieldset>etiqueta es útil! Usaremos <fieldset>etiquetas para representar todos los elementos de contenedor en nuestra representación de formulario / XML y así obtener un resultado como este:
<form name="places">
<fieldset name="place">
<input type="text" name="name"/>
<select name="type">
<option value="dwelling">Dwelling</option>
<option value="restoration">Restoration</option>
<option value="sport">Sport</option>
<option value="administrative">Administrative</option>
</select>
<input type="text" name="activity"/>
<input type="text" name="activity"/>
<input type="text" name="activity"/>
</fieldset>
</form>
Como puede ver en este formulario, estamos rompiendo la regla de nombres únicos, pero esto está bien porque se convertirán en una matriz de elementos, por lo que solo se hará referencia a ellos por su índice dentro de la matriz.
En este punto, puede ver que no hay name="array[]"un nombre similar dentro de la forma y que todo es bonito, simple y semántico.
Ahora queremos que este formulario se convierta en un objeto JSON que se verá así:
{''places'':{
''place'':[
{
''name'': ''Home'',
''type'': ''dwelling'',
''activity'':[
''sleep'',
''eat'',
''watch TV''
]
},
{...},
{...}
]
}}
Para hacer esto, he desarrollado este complemento jQuery aquí, que alguien ayudó a optimizar en este hilo de Revisión de Código y se ve así:
$.fn.toJSO = function () {
var obj = {},
$kids = $(this).children(''[name]'');
if (!$kids.length) {
return $(this).val();
}
$kids.each(function () {
var $el = $(this),
name = $el.attr(''name'');
if ($el.siblings("[name=" + name + "]").length) {
if (!/radio|checkbox/i.test($el.attr(''type'')) || $el.prop(''checked'')) {
obj[name] = obj[name] || [];
obj[name].push($el.toJSO());
}
} else {
obj[name] = $el.toJSO();
}
});
return obj;
};
También hice esta única entrada de blog para explicar esto más.
Esto convierte todo en un formulario a JSON (incluso radio y casillas de verificación) y todo lo que tendrá que hacer es llamar
$.post(''script.php'',(''form'').toJSO(), ...);
Sé que hay muchas formas de convertir formularios en objetos JSON y es seguro .serialize()y .serializeArray()funciona bien en la mayoría de los casos y están destinados a ser utilizados en su mayoría, pero creo que esta idea de escribir un formulario como una estructura XML con nombres significativos y convertirlo en objeto JSON bien formado vale la pena probar el , y el hecho de que pueda agregar etiquetas de entrada con el mismo nombre sin preocuparse es muy útil si necesita recuperar datos de formularios generados dinámicamente.
¡Espero que esto ayude a alguien!
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;
};
Esta función debe manejar matrices multidimensionales junto con múltiples elementos con el mismo nombre.
Lo he estado usando por un par de años hasta ahora:
jQuery.fn.serializeJSON=function() {
var json = {};
jQuery.map(jQuery(this).serializeArray(), function(n, i) {
var _ = n.name.indexOf(''['');
if (_ > -1) {
var o = json;
_name = n.name.replace(//]/gi, '''').split(''['');
for (var i=0, len=_name.length; i<len; i++) {
if (i == len-1) {
if (o[_name[i]]) {
if (typeof o[_name[i]] == ''string'') {
o[_name[i]] = [o[_name[i]]];
}
o[_name[i]].push(n.value);
}
else o[_name[i]] = n.value || '''';
}
else o = o[_name[i]] = o[_name[i]] || {};
}
}
else {
if (json[n.name] !== undefined) {
if (!json[n.name].push) {
json[n.name] = [json[n.name]];
}
json[n.name].push(n.value || '''');
}
else json[n.name] = n.value || '''';
}
});
return json;
};
Hay un complemento para hacer justamente eso para jQuery, github.com/marioizquierdo/jquery.serializeJSON . Lo he usado con éxito en algunos proyectos ahora. Funciona a las mil maravillas.
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 forma más sencilla y precisa que encontré para este problema fue usar el complemento de bbq o este (que tiene un tamaño de aproximadamente 0,5K bytes).
También funciona con matrices multidimensionales.
$.fn.serializeObject = function()
{
return $.deparam(this.serialize());
};
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).
Ok, sé que esto ya tiene una respuesta muy positiva, pero recientemente se me hizo otra pregunta similar , y también me dirigieron a esta pregunta. También me gustaría ofrecer mi solución, ya que ofrece una ventaja sobre la solución aceptada: puede incluir elementos de formulario deshabilitados (lo que a veces es importante, dependiendo de cómo funcione su UI)
Aquí está mi respuesta de la otra pregunta de SO :
Inicialmente, estábamos usando el método serializeArray() jQuery, pero eso no incluye elementos de formulario que están deshabilitados. A menudo, deshabilitaremos los elementos de formulario que están "sincronizados" con otras fuentes en la página, pero aún necesitamos incluir los datos en nuestro objeto serializado. Así que serializeArray() está fuera. Usamos el selector de :input para obtener todos los elementos de entrada (tanto habilitados como deshabilitados) en un contenedor determinado, 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 en realidad está ligeramente modificado de lo que usamos. Necesitamos crear un objeto que estuviera estructurado como un ID. ID .NET, 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, ya que son usos simples de la función $.map() , y usted tiene control completo sobre su selector (por lo tanto, qué elementos terminan incluyendo en su objeto resultante). Además, no se requieren complementos adicionales. JQuery viejo llano.
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.
Puedes hacerlo:
var frm = $(document.myform);
var data = JSON.stringify(frm.serializeArray());
Ver JSON .
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;
}
Si está usando Underscore.js puede usar el relativamente conciso:
_.object(_.map($(''#myform'').serializeArray(), _.values))
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
Usando la solución de maček , lo modifiqué para que funcione con la forma en que ASP.NET MVC maneja sus objetos complejos / anidados en el mismo formulario. Todo lo que tienes que hacer es modificar la pieza de validación a esto:
"validate": /^[a-zA-Z][a-zA-Z0-9_]*((?:/[(?:/d*|[a-zA-Z0-9_]+)/])*(?:/.)[a-zA-Z][a-zA-Z0-9_]*)*$/,
Esto coincidirá y luego asignará correctamente los elementos con nombres como:
<input type="text" name="zooName" />
Y
<input type="text" name="zooAnimals[0].name" />
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.
Convertir cualquier cosa en un objeto (no probado en una unidad)
<script type="text/javascript">
string = {};
string.repeat = function(string, count)
{
return new Array(count+1).join(string);
}
string.count = function(string)
{
var count = 0;
for (var i=1; i<arguments.length; i++)
{
var results = string.match(new RegExp(arguments[i], ''g''));
count += results ? results.length : 0;
}
return count;
}
array = {};
array.merge = function(arr1, arr2)
{
for (var i in arr2)
{
if (arr1[i] && typeof arr1[i] == ''object'' && typeof arr2[i] == ''object'')
arr1[i] = array.merge(arr1[i], arr2[i]);
else
arr1[i] = arr2[i]
}
return arr1;
}
array.print = function(obj)
{
var arr = [];
$.each(obj, function(key, val) {
var next = key + ": ";
next += $.isPlainObject(val) ? array.print(val) : val;
arr.push( next );
});
return "{ " + arr.join(", ") + " }";
}
node = {};
node.objectify = function(node, params)
{
if (!params)
params = {};
if (!params.selector)
params.selector = "*";
if (!params.key)
params.key = "name";
if (!params.value)
params.value = "value";
var o = {};
var indexes = {};
$(node).find(params.selector+"["+params.key+"]").each(function()
{
var name = $(this).attr(params.key),
value = $(this).attr(params.value);
var obj = $.parseJSON("{"+name.replace(/([^/[]*)/, function()
{
return ''"''+arguments[1]+''"'';
}).replace(//[(.*?)/]/gi, function()
{
if (arguments[1].length == 0)
{
var index = arguments[3].substring(0, arguments[2]);
indexes[index] = indexes[index] !== undefined ? indexes[index]+1 : 0;
return '':{"''+indexes[index]+''"'';
}
else
return '':{"''+escape(arguments[1])+''"'';
})+'':"''+value.replace(/[//"]/gi, function()
{
return "//"+arguments[0];
})+''"''+string.repeat(''}'', string.count(name, '']''))+"}");
o = array.merge(o, obj);
});
return o;
}
</script>
La salida de prueba:
$(document).ready(function()
{
console.log(array.print(node.objectify($("form"), {})));
console.log(array.print(node.objectify($("form"), {selector: "select"})));
});
en
<form>
<input name=''input[a]'' type=''text'' value=''text''/>
<select name=''input[b]''>
<option>select</option>
</select>
<input name=''otherinput[c][a]'' value=''a''/>
<input name=''otherinput[c][]'' value=''b''/>
<input name=''otherinput[d][b]'' value=''c''/>
<input name=''otherinput[c][]'' value=''d''/>
<input type=''hidden'' name=''anotherinput'' value=''hidden''/>
<input type=''hidden'' name=''anotherinput'' value=''1''/>
<input type=''submit'' value=''submit''/>
</form>
rendirá:
{ input: { a: text, b: select }, otherinput: { c: { a: a, 0: b, 1: d }, d: { b: c } }, anotherinput: 1 }
{ input: { b: select } }
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
Codifiqué un formulario a un objeto JavaScript multidimensional para usarlo en producción. El resultado es https://github.com/serbanghita/formToObject.js .
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()));
}
usando lodash#set
let serialized = [
{ key: ''data[model][id]'', value: 1 },
{ key: ''data[model][name]'', value: ''product'' },
{ key: ''sid'', value: ''dh0un1hr4d'' }
];
serialized.reduce(function(res, item) {
_.set(res, item.key, item.value);
return res;
}, {});
// returns
{
"data": {
"model": {
"id": 1,
"name": "product"
}
},
"sid": "dh0un1hr4d"
}