JavaScript递归来将列表从XML格式化为HTML [英] JavaScript Recursion to format lists from XML to HTML

问题描述

我有一个练习，它要求我使用递归将XML数据输出到HTML列表标记中。可惜的是，我承认我的数学缺陷，我希望有人向我展示如何使用JavaScript实现递归逻辑到XML的节点结构。

结果如下：

$ b $ h3 $输出：

脚本：

< pre-class =lang-js prettyprint-override> document.getElementById（'parse'）.addEventListener（'click'，function（）{
var xml ='< ddm>'
+'< menu0 submenu =true>< name> Welcome< / name>'
+'< menu1>主页< / menu1>'
+'< ; menu1>公告< / menu1>'
+'< / menu0>'
+'< menu0 submenu =true>< name> Members \'Area< / name>'
+'< menu1> Constitution& amp; amp; >'
+'< menu1 submenu =true>< name> AGM Minutes< / name>'
+'< menu2> 2012< / menu2>'
+'< menu2> 2011< / menu2>'
+'< / menu1>'
+'< / menu0>'
+'< menu0> ; / 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 [指数] .textContent;
} else {
list + = nodeMarkup（node.childNodes [index]）;
};
};
返回node.hasAttribute（'submenu'）
？ '< li>'+ header +'< ul>'+ list +'< / ul>< / li>'
：list;
} else {
return'< li>'+ node.textContent +'< / li>';
};
};


HTML：

 < input type =buttonid =parsevalue =Parse/> 
< ul id =result>< / ul> 
  

CSS：

  #result {
 list-style-type：none; 
保证金：0; 
 padding：0; 
} 
  

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>

解决方案

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;
}

这篇关于JavaScript递归来将列表从XML格式化为HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！