Object hierarchy from XML document using JavaScript

Question

Given an XML document such as this:

<Root> 
    <Child1>
        <ChildOfChild1_1> 
            <FinalChild> </FinalChild>
        </ChildOfChild1_1>
        <ChildOfChild1_2> </ChildOfChild1_2>
    </Child1>
    <Child2>
        <ChildOfChild2_1> </ChildOfChild2_1>
    </Child2>
    <Child3> </Child3>
</Root>

I would like to return a object which has only two parameters, name and children. It would look like:

{
    name: "Root"
    children: [
        {
            name: "Child1"
            children: [
                {
                    name: "ChildOfChild1_1"
                    children:[
                        {
                            name: "FinalChild"
                            children: null
                        }
                    ]
                },
                {
                    name: "ChildOfChild1_2"
                    children: null
                }

            ]
        }, 
        {
            name: "Child2"
            children: [
                {
                    name: "ChildOfChild2_1"
                    children: null
                }
            ]
        }, 
        {
            name: "Child3"
            children: null
        }, 
    ]
}

I do not care about node attributes, only nodeName and if they have children. I wrote code to get the first level of children but cannot wrap my head around the recursive part to get as deep as necessary. Thanks.

Below is what I have so far:

//assuming block is the root node and the root will at least have 1 child
let root = {
    name = '',
    children = []
};
root.name = block.nodeName;

for(let i=0 ; i<block.children.length ; i++) {
    root.children.push(getChildren(block.children[i]));
}

function getChildren(data) {
    let child = {};
    child.name = data.nodeName;
    child.children = []; //stuck here
    
    return child;
}

Ir's not JSON just because it has curly brackets. What you (want to) have is an object, plain and simple. I've removed the "JSON" from the title. Related reading: benalman.com/news/2010/03/theres-no-such-thing-as-a-json — Tomalak
– Tomalak, Commented Mar 2, 2022 at 7:47

Tomalak · Accepted Answer · 2022-03-02 07:59:00Z

The task is much simpler than you think.

You want a function that returns a node name and the list of node children, each of them processed in the exact same way:

function toObject(node) {
    return {
        name: node.nodeName,
        children: [...node.children].map(toObject)
    };
}

That's it.

const xmlDoc = new DOMParser().parseFromString(`<Root> 
    <Child1>
        <ChildOfChild1_1> 
            <FinalChild> </FinalChild>
        </ChildOfChild1_1>
        <ChildOfChild1_2> </ChildOfChild1_2>
    </Child1>
    <Child2>
        <ChildOfChild2_1> </ChildOfChild2_1>
    </Child2>
    <Child3> </Child3>
</Root>
`, "application/xml");

function toObject(node) {
    return {
        name: node.nodeName,
        children: [...node.children].map(toObject)
    };
}

const tree = toObject(xmlDoc.documentElement);
console.log(tree);

If you really want null when there are no children (an empty array is much easier to handle down the line, trust me), I'm sure you can make the necessary change in toObject yourself.

Collectives™ on Stack Overflow

Object hierarchy from XML document using JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related