Question

I’m currently trying to create an object to be used in a JSON request, based on the controls on the page and their values.

I’m using the jQuery map() function to get the keys and values out of the controls like so

var data = $("fieldset > div.section").map(function (i, e) {
    var result = {};
    result[e.children[0].id.substring(3);] = e.children[1].value;

    return result;
}).get();

This gets the data I’m after, but I end up with nested objects rather than an array, this looks like so

[{"ClientId":"123456"},{"ClientIdType":"5"},{"City":"Brisbane"},{"Sex":"10"},{"PostCode":"4064"},{"State":"QLD"}]

But what I want is something like

{"ClientId":"123456","ClientIdType":"5","City":"Brisbane","Sex":"10","PostCode":"4064","State":"QLD"}

Is there a way to do this in one go, or should I just iterate over the array again to flatten it?

Answer 1

This is a case for each() not map():

var data = {};

$("fieldset > div.section").each(function (i, e) {
    data[e.children[0].id.substring(3)] = e.children[1].value;
});