JavaScript Recursion to format lists from XML to HTML

Question

I have an exercise where it calls upon me to use recursion to output XML data into HTML list tags. Shamefully admitting my shortcomings in mathematics, I would like someone to show me how to implement recursive logic to XML's 'node structure' using JavaScript.

Here is the outcome: JSFiddle

EDIT Added sample XML to round off this topic and deleted unneeded code. The XML used to create the recursive function:

<ddm>
           <menu0 submenu="true"><name>Welcome</name>
                     <menu1>Home Page</menu1>
                     <menu1>Bulletin</menu1>
                </menu0>
                <menu0 submenu="true"><name>Members\' Area</name>
                    <menu1>Constitution &amp; Bylaws</menu1>
                    <menu1 submenu="true"><name>AGM Minutes</name>
                        <menu2>2012</menu2>
                        <menu2>2011</menu2>
                    </menu1>
                </menu0>
                <menu0>About</menu0>
            </ddm>

<ddm>

Tags have children, those children can have children of their own which can have children of their own... See the recursion? If not then it's time for you to read the definition of the recursion ;-). — Nux
– Nux, Commented Mar 1, 2013 at 0:12

ThinkingStiff · Accepted Answer · 2013-03-01 03:52:35Z

You call your recursive function once with your top level element. Every child element will simply call the same function. When you get to the bottom, you stop, and everything gets passed back up.

This should get your started (a sample of your xml).

Demo:

Output:

Script:

document.getElementById( 'parse' ).addEventListener( 'click', function () {
    var xml = '<ddm>'
                + '<menu0 submenu="true"><name>Welcome</name>'
                    + '<menu1>Home Page</menu1>'
                    + '<menu1>Bulletin</menu1>'
                + '</menu0>'
                + '<menu0 submenu="true"><name>Members\' Area</name>'
                    + '<menu1>Constitution &amp; Bylaws</menu1>'
                    + '<menu1 submenu="true"><name>AGM Minutes</name>'
                        + '<menu2>2012</menu2>'
                        + '<menu2>2011</menu2>'
                    + '</menu1>'
                + '</menu0>'
                + '<menu0>About</menu0>'
            + '</ddm>',
        xmlDoc = new DOMParser().parseFromString( xml, 'text/xml' ),
        html = nodeMarkup( xmlDoc.documentElement );
    document.getElementById( 'result' ).innerHTML = html;
} );

function nodeMarkup( node ){
    if( node.childNodes.length ) {
        var list = '', header = '';
        for( var index = 0; index < node.childNodes.length; index++ ) {
            if( node.childNodes[index].tagName == 'name' ) {
                header = node.childNodes[index].textContent;
            } else {
                list += nodeMarkup( node.childNodes[index] );
            };
        };
        return node.hasAttribute( 'submenu' ) 
            ? '<li>' + header + '<ul>' + list + '</ul></li>'
            : list;
    } else {
        return '<li>' + node.textContent + '</li>';
    };  
};

HTML:

<input type="button" id="parse" value="Parse" />
<ul id="result"></ul>

CSS:

#result {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

Collectives™ on Stack Overflow

JavaScript Recursion to format lists from XML to HTML

1 Answer 1

Output:

Script:

HTML:

CSS:

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Output:

Script:

HTML:

CSS:

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related