jquery ajax response, traverse XML to build nested menu tree

Question

I am going nuts trying to figure this out, I am trying to build a simple menu tree with multi levels

RootFolder
- First Sub Folder
-- First Sub Sub Folder
--- First Sub Sub Sub Folder
--- First Sub Sub Sub Sub Folder
- Second Sub Folder
- Second Sub Sub Folder

My XML is very simple (not the right values)

<OrgFolderDetails>
    <FolderName>Main Folder</FolderName>
    <TheChildren>
        <OrgFolderDetails>
            <FolderName>First Sub Folder</FolderName>
            <TheChildren>
                <OrgFolderDetails>
                    <FolderName>First Sub Sub Folder</FolderName>
                    <TheChildren>
                        <OrgFolderDetails>
                            <FolderName>First Sub Siub Sub Folder</FolderName>
                            <TheChildren>
                                <OrgFolderDetails>
                                    <FolderName>First Sub Sub Sub Sub Folder</FolderName>
                                    <TheChildren/>
                                </OrgFolderDetails>
                            </TheChildren>
                        </OrgFolderDetails>
                    </TheChildren>
                </OrgFolderDetails>
            </TheChildren>
        </OrgFolderDetails>
        <OrgFolderDetails>
            <FolderName>Second Sub Folder</FolderName>
            <TheChildren>
                <OrgFolderDetails>
                    <FolderName>Second Sub Sub Folder</FolderName>
                    <TheChildren/>
                </OrgFolderDetails>
            </TheChildren>
        </OrgFolderDetails>
    </TheChildren>
</OrgFolderDetails>

I have used jQuery's .filter() and. find() each() without any success, it doesn't give me the nice dashes to indicate which level I am in, it just spits out the folder names.

My code that traverses

 $(data).find("FolderName").each(function(){
             var folderName = $(this).text();

            $("#folderLevels").append(folderName+"<br/>");
         });

ahren, thanks, I forgot to add my initial snippet. My concept/approach was trying to locate the position and counting the nested position and adding the # of dashes... No success there. — Gu Ming Peng
– Gu Ming Peng, Commented May 23, 2012 at 3:03

ahren · Accepted Answer · 2012-05-23 03:21:46Z

1

Okay, so from what I understand, we need to build a menu, with a certain number of preceding dashes, dependent on the level of the child. Lucky, jQuery makes this kinda easy.

$(data).find("FolderName").each(function(){ 
    var levels = $(this).parents("OrgFolderDetails").size();
    var text = $(this).text();
    var html = "";

    for(var j=0; j < levels; j++){
        html += "-";    
    }
    html += " "+text+"</br>"; //add in that space after the dashes, and the <br>

    $("#folderLevels").append(html);
});

Hope that helps. The main helper in this is the parents() method. http://api.jquery.com/parents

answered May 23, 2012 at 3:21

ahren

17k5 gold badges52 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gu Ming Peng Over a year ago

OMG, are you serious... I see your approach, that works well, thank you very much... your code teaches me a lot, much appreciated!

McGarnagle · Accepted Answer · 2012-05-23 03:22:14Z

0

I think you will want to use a recursive function for this.

var s = getNestedString($(data), 0);

function getNestedString(d, level) {
    // get the name of current node
    var s = d.children("FolderName").text() + "<br/>";

    // prepend with dashes for inner levels
    for (var i=0 ; i<level ; i++) {
        s = "-" + s;
    }

    // get children and call this function recursively (incrementing level)
    var ch = d.children("TheChildren").children("OrgFolderDetails");
    for (var i=0 ; i < ch.length ; i++) {
        s = s + getNestedString(ch[i], level+1);
    }

    // return string for current and nested nodes
    return s;
}

answered May 23, 2012 at 3:22

McGarnagle

103k31 gold badges235 silver badges264 bronze badges

2 Comments

Gu Ming Peng Over a year ago

I will check this out too, thanks for the quick response, I was ripping my hair out!

McGarnagle Over a year ago

@GuMingPeng I don't think mine works actually, plus ahren's answer is better (simpler). I thought you could use children since it exists in JQuery, but apparently not.

Collectives™ on Stack Overflow

jquery ajax response, traverse XML to build nested menu tree

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related