Tree traversal using jQuery

Question

<ul  id="org" style="display:none">
<li id="visited"><a href="#" class="ui-link">ROOT</a>
               <ul id="main_child_ul" class="children">
               <li><a href="#">Acura</a>
                    <ul>
                        <li><a href="#">Audi</a>
                            <ul>
                            <li><a href="#">BMW</a>
                                <ul>
                                    <li><a href="#">Ferrari</a></li>
                                </ul>
                            </li>
                            </ul>
                        </li>
                    </ul>
               </li>
               <li><a href="#">Cadillac</a>
                    <ul>
                        <li><a href="#">Acura1</a>
                            <ul>
                                <li><a href="#">Audi1</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">BMW1</a></li>
                <li><a href="#">Cadillac1</a>
                    <ul>
                        <li><a href="#">Ferrari1</a></li>
                    </ul>
                </li>
                </ul>
</li>
</ul>

This is my html UL LI tree structure.

I want to generate JSON of this tree structure. This list is generating dynamically.

I am using jquery - here is my code - I get help from this article here -

function processOneLi(node) {       
        var aNode = node.children("a:first");
        var retVal = {
            "link": aNode.attr("href"),
            "title": aNode.text()
        };
        node.find("> .children > li").each(function() {
            if (!retVal.hasOwnProperty("nodes")) {
                retVal.nodes = [];
            }
            retVal.nodes.push(processOneLi($(this)));
        });
        return retVal;
    }

 function json_output()
    {
        $("#org > li").each(function() {
            out.push(processOneLi($(this)));
        });

        console.log("got the following JSON from your HTML:", JSON.stringify(out));
    }

This is generating json fine only for smaller tree - I want solution generic. and One more problem in this solution is that it is repeating same nodes many time. Please please help, I'm stuck in my project.

Answer 1

Something like this?

function generateTree($node, result) {
    result = result || {'nodes' : []};
    $node.children('li').each(function(){
        var $this = $(this);
        var anch = $this.children('a').get(0);
        var elem = {
            "link": anch.href,
            "title": anch.innerHTML,
            "nodes" : []
        };

        if($this.has('ul'))
            generateTree($this.children('ul'), elem);
        result.nodes.push(elem);
    });
    return result.nodes; //or just return result.nodes[0] to access the root as object. But the existing one will be generic in case you are setting up for a class selector for multiple ul's as root.
}

Invoke it as

var resTree = generateTree($("#org"));
console.log(JSON.stringify(resTree));

Fiddle