Dynamically add values to dynamic key in mutlidimensional associative javascript object

Question

I give up searching!

I want to create an object in Javascript, that on the change of form fields, is populated with an ID as the first level, and a name - value pair as the second.

var ch = {};

    $('.trackchanges').change(function() {
        var id = $(this).parents('form').attr('id');
        var name = $(this).attr('name');
        var value = $(this).val();

        ch[id] = {};
        ch[id][name] = value;
    });

The code above, does not work. Every time it runs through the code, the value is reset. I assume this has something to do with the need to use some sort of push ch.push(key->value).

Thanks so much for your help.

Mulan · Accepted Answer · 2013-09-02 20:18:05Z

1

Sample HTML

This HTML includes two forms to demonstrate that the JavaScript solution (below) won't cause change conflicts across forms.

<form>
    <input name="foo" class="trackChanges" />
    <input name="bar" class="trackChanges" />
    <input name="bof" />
    <input type="submit" />
</form>

<form>
    <input name="foo" class="trackChanges" />
    <input name="bar" class="trackChanges" />
    <input name="bof" />
    <input type="submit" />
</form>

The JavaScript (using jQuery)

$(".trackChanges").on("change", function(event) {
    var input = $(this),
        form  = input.parents("form"),
        data  = form.data("changes") || {};

    // log new change
    data[input.attr('name')] = input.val();

    // save changes
    form.data("changes", data);
});

$("form").on("submit", function(event) {
    var data = $(this).data("changes") || {};
    console.log(data);

    // just output the changes for now
    event.preventDefault();
});

jsfiddle demo

I thinks this is a better solution because it bind the changes to each form using jQuery.data and then you can recall that information at any time.

This means you don't have to do any sort of change tracking with a form's ID

Trying to lead by example here, so I'm going to address this:

I assume this has something to do with the need to use some sort of push ch.push(key->value)

The problem with your code above doesn't have anything to do with [].push. The most glaring mistake of your code is that each time the onchange event gets fired, you're running this bit of code

ch[id] = {};

This essentially nukes the previous change that have been saved.

edited Sep 2, 2013 at 20:18

answered Sep 2, 2013 at 19:43

Mulan

136k35 gold badges240 silver badges276 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jacob Raccuia Over a year ago

I think this is a better idea as well! I will try it and let you know :)

Jacob Raccuia Over a year ago

Can you explain to me what this does? data = form.data("changes") || {}; What is .data("changes") ? This worked PERFECTLY but I want to know why :)

Mulan Over a year ago

It's assigning form.data("changes") to data, but if it's blank (or undefined), it will assign an empty object ({})

Collectives™ on Stack Overflow

Dynamically add values to dynamic key in mutlidimensional associative javascript object

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related