Question

I am building a form in HTML out of a javascript object that I’ve imported from a JSON file.
I use a recurisve algorithm to build HTML tables, and respective elements (labels, text boxes, etc.)
The fields load with the value of the current node.

The idea is to edit the values in the textboxes; which in turn updates the javascript object. When
changes have been made, the editor will send the JSON object to the server and update the file.

The puzzling question, is how do I reference the node that has been changed? I have tried several
approaches to no avail.

EDIT:

This is a basic idea of what I’m doing:

function build_tree(obj, depth) {
    for (key in obj) {
        if (typeof(obj[key]) == 'object') {
            print(key + "<input type="text" value='" + obj[key] + "'>");
            build_tree(obj[key], depth + 1);
        } else 
            print(key + "<input type="text" value='" + obj[key] + "'>");
}

Now, how do I bind the value of obj[key] to the text boxes, so that when I change the
value it updates the Javascript object?

Answer 1

First off you need a way to individually identify the input so, i would add a data-key attribute.

function build_tree(obj, depth) {
    for (key in obj) {
        if (typeof(obj[key]) == 'object') {
            print(key + "<input type="text" value='" + obj[key] + "' data-key= '"+key+"'>");
            build_tree(obj[key], depth + 1);
        } else 
            print(key + "<input type="text" value='" + obj[key] + "' data-key= '"+key+"'>");
} 

Then i would attach a change event handler to each text input, after the tree is built.

$('input[type="text"]').on('change',function(){
   var key = $(this).data('key'); 
   obj[key] = $(this).val(); 
}); 

obj would be a global array. Hope this makes sense.