¿Cómo accedo a los valores creados por serializeArray en jQuery?

Question

Tengo este código HTML:

<form id='myform'>
<input name='title' value='foo'/>
</form>

Y puedo crear una matriz de objetos de esta manera:

var dataArray = $("#myform").serializeArray();

Ahora ¿Cómo accedo a 'título' en dataArray? Esto no funciona:

alert(dataArray['title']);
alert(dataArray['title'].val());

Answer 1

Al igual que en lo que Nick ha escrito, pero un poco más limpio

var dataArray = $("#myform").serializeArray(),
    dataObj = {};

$(dataArray).each(function(i, field){
  dataObj[field.name] = field.value;
});

A continuación, acceder de la misma manera

alert(dataObj['title']);

Answer 2

Puede recorrer, @ Tom tiene como ... o si está accediendo a más de uno, ser un poco más eficiente y bucle de una vez, la creación de un objeto como éste:

var dataArray = $("#myform").serializeArray(),
    len = dataArray.length,
    dataObj = {};

for (i=0; i<len; i++) {
  dataObj[dataArray[i].name] = dataArray[i].value;
}

A continuación, puede acceder a ella como desee, por ejemplo:

alert(dataObj['title']); //or alert(dataObj.title);

Puede probarlo aquí .

Answer 3

alert(dataArray[0].name);
alert(dataArray[0].value);

Así que:

for (i=0; i<dataArray.length; i += 1) {
    if (dataArray[i].name === "title") {
        // do something here...
    }
}

Answer 4

Ejecutar console.log(dataArray);, a continuación, abrir el inspector de propiedades, y comprobar la consola. En Chrome, que te clic derecho y seleccionar "Inspeccionar elemento" y haga clic en el icono "> =" mirando en la parte inferior izquierda, que es la segunda desde la izquierda.

En Firefox que había instalar Firebug y hay una pestaña llamada "consola"

No está seguro de si está disponible en el IE, probablemente algo en las herramientas de desarrollo (presione F12 ) pero yo no recomendaría el desarrollo en el IE.

De todos modos esto mostrará el objeto de una manera que le permite navegar y ver los valores de cada elemento. De esa manera usted puede entonces usar esto para descifrar cómo acceder a los valores:)

Buena suerte

Answer 5

La adición de este de todos modos para ayudar a otros en el futuro. Buena manera de inspeccionar rápidamente todos los valores.

var formdata = $( "#myform" ).serializeArray();
var formdata = JSON.stringify(formdata);
alert (formdata);

Answer 6

append / eco / imprimir dataArray[0].name a un div dará 'título' que

Answer 7

Alerta serializeArray de insumos en myDiv (nota: el selector :input incluirá seleccionar y etiquetas de área de texto, así!):

//alert(fData.length) // how many inputs got picked up 
var fData=$("#myDiv :input").serializeArray();
var msg=""; 
for(var i=0;i<fData.length;i++){
    var raKy=Object.keys(fData[i]); 
    msg+="\n"+raKy[0]+":"+eval("fData[i]."+raKy[0])+" "+raKy[1]+":"+eval("fData[i]."+raKy[1]); 
}
alert(msg);

Answer 8

Con uderscore.js, esto es cómo podemos ir sobre ella:

var serializedArray = $('form#spiderman-application').serializeArray();

var serializedObject = _.object(
  _.pluck(serializedArray, 'name'), 
  _.pluck(serializedArray, 'value')
)

console.log(serializedObject);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>

<form id="spiderman-application">
  <legend>Application Form</legend>
  <input name="./fname" value="Peter" />
  <input name="./lname" value="Parker" />
</form>

Buena suerte ...