creating list with sub items from json structure

Question

I am creating a list with the below code which is contained in this fiddle.

<ul></ul>


var myList = [{
        "title": "Home",
            "sub": 0,
            "url": "/home",
            "show": 1
    }, {
        "title": "News",
            "sub": 0,
            "url": "/news",
            "show": 1
    }, {
        "title": "About",
            "sub": 1,
            "url": "/about",
            "show": 1,
        child: [{
            "title": "Contact",
                "sub": 0,
                "url": "/about/contact",
                "show": 1
        }]
    }, {
        "title": "Other",
            "sub": 0,
            "url": "/other",
            "show": 0
    }];

    $.each(myList, function (entryIndex, entry) {
        var title = this.title;
        var show = "";
        var sub = '';
        var url = this.url;
        if (!this.show) {
            show = "style=color:grey;";
        }
        if (this.sub) {
            sub = $("ul").append(this.child.text);
            console.log(sub);
        }
        $("ul").append("<li " + show + "> " + title + sub + "</li>");
    });

The output I am getting is, which is working as expected except for the children of about.

<ul>
    <li> Home</li>
    <li> News</li>
    <li> About[object Object]</li>
    <li style="color:grey;"> Other</li>
</ul>

How do I go about getting the children to appear so I get

<ul>
    <li> Home</li>
    <li> News</li>
    <li> About
        <ul>
           <li> Contact</li>
        </ul>
    </li>
    <li style="color:grey;"> Other</li>
</ul>

Have you heard of recursive functions? Functions that call themselves. With a little bit of hard work and effort you can achieve a level-up here ;). — kapa, May 27 '14 at 20:55
Might also look into this if you have difficulties: http://stackoverflow.com/questions/6034960/create-nested-ul-lists-from-data-object?rq=1 — kapa, May 27 '14 at 21:08

score 2 · Accepted Answer · answered May 27 '14 at 21:05

Try something like this:

Online Demo

$(document).on('ready',function(){

var data =  [{/*... your data*/}] ;

var endMenu =getMenu(data);

    function getMenu(d ){
          return d.map(function(node){

              var subMenu = ( node.child && node.child.length > 0) ? '<ul>'+ getMenu(node.child) + '</ul>' : "";
               return '<li>'+node.title +  subMenu + '</li>' ;
           });
       }
      $('#menu').html('<ul>'+endMenu.join('')+ '</ul>');
});

All you have to do is to check is your object has child items and if does you execute the function again getMenu(node.child), like:

var subMenu = ( node.child && node.child.length > 0) ? '<ul>'+ getMenu(node.child) + '</ul>' : "";

Hopefully this will guide you to implement it in you version.

That works well thanks, however for some reason when I have multiple children it is outputting
Contact
,
Contact2
can you see where that extra , is coming from and how it can be removed? http://jsfiddle.net/6PYSU/ — ak85, May 29 '14 at 23:06
Checj this out ==> http://jsfiddle.net/6PYSU/1/ a .join('') is missing for the submenu — Dalorzo, May 29 '14 at 23:28

creating list with sub items from json structure

1 Answers1