Creating a JS Object with a Recursive Function

Question

I have an html block like this;

<div id="a">
   <div id=b parentid=a> 
        <div id=d parentid=b> 
        </div>
   </div>
   <div id=c parentid=a> 
       <div id=e parentid=c> 
           <div id=f parentid=e> 
           </div>
       </div>
   </div>
</div>

I want to convert this dynamic html block to javascript object. I guess the best way to do it is the recursive function. I want to scan the html structure above and get the following output the result I want;

items : 
[
{
    id : "a",
    parentid : null,
    items : 
        [
        {
            id : "b",
            parentid : "a",
            items : 
                [
                {
                    id : "d",
                    parentid : "b",
                }
                ]
        },
        {
            id : "c",
            parentid : "a",
            items : 
                [
                {
                    id : "e",
                    parentid : "c",
                    items : 
                        [
                        {
                            id : "f",
                            parentid : "e",
                        }
                        ]
                }
                ]
        }
        ]
}
]

I'm trying this way but I can't get the right result. addComponent() is a function I defined.

function getSubs(a) {
    var generalObject = new Component();
    var gElement = [];
    gElement = $("[parentid=" + a + "]");
    if (gElement.length > 0) {      
        for (var i = 0; i < gElement.length; i++) {
            var obj = new Component();
            elementId = gElement[i].getAttribute('id');
            dataType = gElement[i].getAttribute('data-type');
            obj.type = dataType;
            obj.key = elementId;
            generalObject.addComponent(obj);
            getSubs(elementId);
        }
        
    }
    
}

can you help me?

Get help from here: https://stackoverflow.com/questions/12980648/map-html-to-json — Rifat Bin Reza, Mar 02 '21 at 08:05
You're 100% right. Start with a recursive function, and in the function get the properties of the current node. In vanilla js it'll be something like `node.getAttribute('prop_name')`. In the recursive function itself I'd create a dictionary and create/update nodes as I traverse the HTML doc. But as @NinaScholz stated, you need to try first, and paste that code sample so we can take it from there to help you. Check out how to traverse the DOM here https://javascript.plainenglish.io/how-to-traverse-the-dom-in-javascript-d6555c335b4e — Rohan Büchner, Mar 02 '21 at 08:08

score 0 · Accepted Answer · answered Mar 02 '21 at 08:33

You could take a simplified linear approach and get all nodes, take an object as reference for the parent nodes.

For each node assign a new object to the parent's children and save the node to the reference.

const
    tree = [],
    references = { undefined: { children: tree } };
    
for (const { id, dataset: { parentid } } of document.getElementsByTagName('div')) {
    references[parentid].children.push(references[id] = { id, parentid, children: [] });
}

console.log(tree);

.as-console-wrapper { max-height: 100% !important; top: 0; }

<div id="a">
    <div id="b" data-parentid="a">
        <div id="d" data-parentid="b">
        </div>
    </div>
    <div id="c" data-parentid="a">
        <div id="e" data-parentid="c">
            <div id="f" data-parentid="e">
            </div>
        </div>
    </div>
</div>

Creating a JS Object with a Recursive Function

1 Answers1