Manipulate JSON tree structure

Question

I am building a form builder, which allows the user to have multiple questions, with sub questions, and sub questions to those sub questions, etc.

I have a method that works extracting the data, but for that, the data / json tree needs to be in a specific format:

u1fsQExd1aZmnpL : {
    subfields : {
        2FNdVdkaefaD6xQ : {
            subfields : {
                fZ0zn6d51TgVqID : {
                    subfields : {
                        05E1JSFYVHJlGVP : {
                            subfields : {}
                        }
                    }
                }
            }
        }
    }
}

And this is how the data starts out:

u1fsQExd1aZmnpL : {
    2FNdVdkaefaD6xQ : {
        fZ0zn6d51TgVqID : {
            05E1JSFYVHJlGVP : {}
        }
    }
}

There can be multiple items at each level, such as:

u1fsQExd1aZmnpL : {
    2fhjsnNchSJowl2 : {},
    2FNdVdkaefaD6xQ : {
        fZ0zn6d51TgVqID : {
            05E1JSFYVHJlGVP : {},
            03jshviJSONDJla : {}
        }
    }
}

My method to manipulate the data into the subfields form structure:

function get_into_subfields(form_structure) {
    for(var mainid in form_structure) {
        for(var key in form_structure[mainid]) {
            if(!form_structure[mainid].hasOwnProperty('subfields')) {
                form_structure[mainid]['subfields'] = {};
            }
            if(key != 'title' && key != 'placeholder' && key != 'help' && key != 'type') {
                // || {} so that the key does not have a 'undefined' value which throws an error with the extract_data method
                form_structure[mainid]['subfields'][key] = get_into_subfields(form_structure[mainid][key]) || {};

                // taking it out keeps the chain going, but it does not put it in the subfields key then
                delete(form_structure[mainid][key]);
            }
        }
    }
}   

But, that cuts out at the first subfields level.

u1fsQExd1aZmnpL : {
    subfields : {
        2FNdVdkaefaD6xQ : {}
    }
}

To give you an overview of what the form can look like, here is an image with a few notes on it for you to see the format.

Note:

• Each question has a main_id field containing their unique ID (I forgot to change the My ID on the screenshot to Main ID on the first two. Sorry.)
• Each question references the first parent using the original_id data attribute. (The main question)
• Each question references it's particular parent using the parent_id data attribute.

What I need to do: Go through the format

u1fsQExd1aZmnpL : {
    subfields : {
        2FNdVdkaefaD6xQ : {}
    }
}

And put it in the format

u1fsQExd1aZmnpL : {
    subfields : {
        2FNdVdkaefaD6xQ : {
            subfields : {
                fZ0zn6d51TgVqID : {
                    subfields : {
                        05E1JSFYVHJlGVP : {
                            subfields : {}
                        }
                    }
                }
            }
        }
    }
}

How do I need to alter my get_into_subfields method?

Answer 1

This answer basically replaces any {key: value} with {key: {subfields: value}} , recursively sending value back through the same algorithm until all property levels have been processed.

 var data = { "u1fsQExd1aZmnpL" : { "2fhjsnNchSJowl2" : {}, "2FNdVdkaefaD6xQ" : { "fZ0zn6d51TgVqID" : { "05E1JSFYVHJlGVP" : {}, "03jshviJSONDJla" : {} } } } }; // this is main object-restructuring function function get_into_subfields(form_structure) { for (var key in form_structure) { form_structure[key] = {subfields: get_into_subfields(form_structure[key])}; } return form_structure; } // this function is simply for showing the code in action // here on Stack Overflow and isn't relevant to the problem function formatObjForHtml(obj) { document.write("<pre>" + JSON.stringify(obj, null, 2) + "</pre>"); } formatObjForHtml(data); // view the data before processing get_into_subfields(data); // process the data formatObjForHtml(data); // view the data after processing 

Note that the property keys of the original data in the Javascript code in this answer are explicitly placed in quotation marks because some of them start with numerals. This may not be relevant for your final application if you are receiving the data from JSON. However, in this proof-of-concept code that includes hard-coded data, the quotes are required.

I have not included any code that deals with "title", "placeholder", "main_id", etc. that you discuss in your question. It is not clear from your question whether these are actually important for the main problem you are asking about, ie re-structuring your data object.

Note also that this answer mutates the original data object in place rather than creating a new, modified object. If you want the original data left unchanged then first do a deep clone of the data and then run get_into_subfields(clone_of_data) .

This answer leaves it up to you to do whatever JSON conversions you require. The JSON stringification in this answer is there simply to make the results viewable in the Stack Overflow code snippet viewer.