Come convertire i dati jQuery.serialize () nell’object JSON?

Esiste una soluzione migliore per convertire i dati di un modulo già serializzati dalla funzione jQuery serialize (), quando il modulo contiene più campi di input Array. Voglio essere in grado di convertire i dati del modulo in un object JSON per ricreare altre tabelle informative. Quindi dimmi un modo migliore per convertire la stringa serializzata in un object JSON.

// Raf // Bily // [email protected] // Andy // [email protected] // Adam // [email protected]

Il metodo jquery applicato per ottenere i dati

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

come faccio a inserire questi dati in un object JSON? che dovrebbe avere i seguenti dati JSON di esempio dal modulo sopra.

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

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

Semplice e veloce;)

Recentemente ho avuto questo problema esatto. Inizialmente, stavamo usando il metodo serializeArray() di jQuery, ma questo non include gli elementi del modulo che sono disabilitati. Disattiveremo spesso elementi di forma “sincronizzati” con altre fonti nella pagina, ma dobbiamo comunque includere i dati nel nostro object serializzato. Quindi serializeArray() è fuori. Abbiamo utilizzato il :input selettore di :input per ottenere tutti gli elementi di input (abilitati e disabilitati) in un determinato contenitore e quindi $.map() per creare il nostro object.

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

Nota che per far funzionare tutto questo, ciascuno dei tuoi input avrà bisogno di un attributo name , che sarà il nome della proprietà dell’object risultante.

Questo è in realtà leggermente modificato da quello che abbiamo usato. Avevamo bisogno di creare un object strutturato come un IDictionary .NET, così abbiamo usato questo: (lo fornisco qui se è utile)

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

Mi piacciono entrambe queste soluzioni, perché sono semplici utilizzi della funzione $.map() e hai il controllo completo sul tuo selettore (quindi, quali elementi finirai includendo nell’object risultante). Inoltre, non è richiesto alcun plugin aggiuntivo. Plain old jQuery.

Usa il plugin jQuery.serializeJSON . Converte i moduli utilizzando lo stesso formato di quello che si troverà in un object Parametri Rails, che è molto standard e ben testato.

Sto usando questo piccolo plugin jQuery, che ho esteso da DocumentCloud:

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

Sono fondamentalmente due righe di codice, ma richiede _.js (Underscore.js), poiché si basa su una funzione di 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; }, {}); } }); 

estensioni:

  • Non serializza un valore di input se è null
  • Può escludere alcuni input passando una serie di nomi di input all’argomento exclude ie ["password_confirm"]

Una soluzione equivalente a quella di Danilo Colasso , con i pro ei contro .serializeArray() di .serializeArray() (in pratica utilizza .reduce invece di $.each ).

Con poco sforzo consente di implementare le funzionalità extra nelle risposte di SC senza richiedere estensioni.

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

Utilizzando underscore e 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"} 

Penso che ci sia molta buona risposta qui, e ho creato la mia funzione basandomi su queste risposte.

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

Bene, lascia che ti spieghi in fondo perché preferisco questa soluzione … Se hai ingressi multipli con lo stesso nome, tutti i valori saranno archiviati in una matrice, ma in caso contrario, il valore verrà memorizzato direttamente come valore dell’indice nel JSON … Questo è dove è diverso dalla risposta di Danilo Colasso in cui il JSON restituito è basato solo su valori di array …

Quindi se hai un modulo con una textarea denominata autore di contenuti e multipli, questa funzione ti restituirà:

 { content : 'This is The Content', authors : [ 0: 'me', 1: 'you', 2: 'him', ] } 
 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); });