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

Question

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?

Do you need one JSON object per group or one for the entire page? — xj9, Oct 26 '10 at 19:38
I can imagine a solution in jQuery... Doing this with just pure JavaScript may be an larger issue here (since you need a selector engine to select those elements) — Šime Vidas, Oct 26 '10 at 19:47
I'm happy to use jQuery, my app is chock full of it already! — cybermotron, Oct 26 '10 at 19:50
@Sime: You only need to select input elements which you can do with `getElementsByTagName` [Works on all browsers](http://www.quirksmode.org/dom/w3c_core.html#t12) — xj9, Oct 26 '10 at 19:55
@indieinvader My intention is to use an attribute selector instead (so that I can grab all elements with a `data-key` attribute) — Šime Vidas, Oct 26 '10 at 20:41
@cybermotron Consider adding the `jQuery` tag to your question then — Šime Vidas, Oct 26 '10 at 20:42
@Sime: That's going to be a lot slower than filtering the ones that don't have the attribute (you *are* reading it anyway so you might as well check). — xj9, Oct 26 '10 at 23:59
http://stackoverflow.com/questions/1184624/serialize-form-to-json-with-jquery — zerodin, Oct 26 '10 at 20:14
Have you check this : https://stackoverflow.com/questions/1184624/convert-form-data-to-javascript-object-with-jquery/39248551#39248551 — Bhavik Hirani, Mar 26 '18 at 08:01

mway · Answer 1 · 2010-10-26T21:09:35.800

3

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.

edited Oct 26 '10 at 21:09

answered Oct 26 '10 at 20:10

mway

4,334
3
26
37

Wow... that certainly takes me closer... the only thing is that it outputs like so {"_id":"contact_1288116316143","firstname":"John","lastname":"Smith","contact_details":[{"param":""},{"param":"sadfsadf"},{"param":"fasdfsad"},{"param":"sadfsad"},{"param":"asdfasdfsadfsa"}],"job_description":[{"param":""},{"param":""}],"fee":[{"param":""},{"param":""}],"measurements":[{"param":""},{"param":""},{"param":""},{"param":""},{"param":""},{"param":""},{"param":""},{"param":""},{"param":""},{"param":""}]} – cybermotron Oct 26 '10 at 20:49
Updated the code - sorry about that, short sight on my part. :) Give it a shot and let me know if that works as expected. – mway Oct 26 '10 at 20:57
now it throws up an error "Uncaught SyntaxError: Unexpected token (". on this line ... json[key] = { $(this).attr('data-item'): $(this).val() }; ... although all of the '(' seem to be in the right place. – cybermotron Oct 26 '10 at 21:08
My bad - forgot to fix a preliminary edit. Take a look now. – mway Oct 26 '10 at 21:10
That works nearly perfect. Only problem is that each key/value, becomes its own object, instead of being siblings inside an object. I just found this amazing plug-in "http://code.google.com/p/form2js/" that does exactly what I want, and gives me some extra wiggle room if I need to change my data mapping. Thanks heaps though. Your answer is awesome. – cybermotron Oct 26 '10 at 22:32

xj9 · Answer 2 · 2010-10-26T20:10:53.363

0

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.

edited Oct 26 '10 at 20:10

answered Oct 26 '10 at 19:51

xj9

3,381
2
24
23

both of these examples come up with errors... the jquery one comes up with "Uncaught SyntaxError: Unexpected token (" , on the 3rd line of the function... the native js one comes up with "Uncaught SyntaxError: Unexpected token [" , on the 3rd line of the for loop. – cybermotron Oct 26 '10 at 20:04

score 0 · Answer 3 · answered Oct 26 '10 at 20:01

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").

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

3 Answers3