How do I access values created by serializeArray in JQuery?

Question

I have this HTML:

And I create an object array from it lik

Answer 1

Similar to what Nick posted, but a little cleaner

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

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

Then access the same way

alert(dataObj['title']);

Answer 2

Adding this anyway to help others in future. Good way to quickly inspect all values.

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

Answer 3

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

So:

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

Answer 4

append/echo/print dataArray[0].name to a div will give you 'title'

Answer 5

Alerting serializeArray of inputs in myDiv (note: the :input selector will include select and textarea tags as well!):

//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 6

You can either loop through, as @Tom has...or if you're accessing more than one, be a bit more efficient and loop once, creating an object like this:

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

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

Then you can access it like you want, for example:

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

You can test it out here.