javascript/jQuery: how do you dynamically turn attribute values into object keys? [duplicate]

This question already has answers here: Closed 10 years ago.

Possible Duplicate:

Convert form data to JS object with jQuery

Here is my problem, I have a whole bunch of elements that look like this...

开发者_开发百科

<input type="email" id="email" data-item="email" data-key="contact_details"/>
<input type="tel" id="mobileNo" data-item="mobileNo" data-key="contact_details"/>

<input type="text" id="sleeve_length" data-item="sleeve_length" data-key="measurements"/>
<input type="text" id="inseam" data-item="inseam" data-key="measurements"/>

Each element has a 'data-key' and 'data-item' which corresponds to the json form i'm trying to turn them into, which will look something like this...

{
    "measurements" : {"sleeve_length" : value, "inseam" : value},

When each data-item is unique... and like this when it isn't...

    "contact_details" : [
                             {"email" : value, "mobileNo" : value},
                             {"email" : value, "mobileNo" : value}
                        ]
}

Now because my web app involves many forms, I need a way to dynamically transform the markup above into these json strings... but I can't seem to wrap my head around it!

Does anyone have any idea how I can approach this?

---

Something like so:

var json = {};
$('#path .to input').each(function(e) {
    var key = $(this).attr('data-key');
    var param = $(this).attr('data-item');
    var obj = {};
    obj[param] = $(this).val();

    // If we already have a record...
    if(key in json) {
        // If it's not an array, make it an array
        if(typeof(json[key].push) != 'function')
            json[key] = [ json[key] ];
        // Toss it on the pile
        json[key].push(obj);
    } else {
        // There's only 1 thus far, keep it k/v
        json[key] = obj;
    }
});

etc. Fairly basic, the key points just being testing whether or not the key you're working with exists or not, and if so, converting it to an array.

Edit: this is untested, but it should work.

Edit 2: revised code so your hash key vars don't come across as strings.

---

You could let some JS MVC / MVVC library do this for you. For example, Knockout. I haven't used it myself yet, but from a glance it seems neat. You define mapping between your JSON object and HTML form fields, and the library would monitor form fields and update the JSON object (a "view model").

---

Something like:

var myJson = {};
// jQuery
$('input').each(function () {
    myJson[$(this).attr('data-key')][$(this).attr('data-value')] = $(this).val();
});
// Native JS
var els = document.getElementsByTagName('input');
for (var i = 0, l = els.length; i < l; i += 1) {
    myJson[els[i]['data-key']][els[i]['data-value']] = els[i].value;
}

Should do the trick. It loops through all of the input elements on the page and puts the data found in each element into an object with the key data-key and sets that equal to an object with the key data-value and the value the value of the input element.

Helpful?

Edit: Is that better? I don't know what I was thinking.