How to create horizontal menu using json object?

Question

I have a json object like

var data = [
        {
        "parent": "Home",
        "child": [

                ]
        },
        {"parent": "Services",
        "child": [
                {"title":"Infrastruture"},
                {"title":"Development"}

                ]
        },
        {
        "parent": "Sector",
        "child": [
                {"title":"Recruitment Consultant"},
                {"title":"Change Management"},
                {"title":"Industrial Relations"}
                ]
        },          
        ]

I want to make a horizontal menu with respect to this json. I am new json object.So how can i do this?

yes.. i did this using jq widgets.but there i used id. But i want the json like the above code mentioned. — Nithin Viswanathan
– Nithin Viswanathan, Commented Feb 21, 2013 at 11:55

Kushal · Accepted Answer · 2013-02-21 15:02:10Z

1

This should get it done.

Markup

<ul id="nav"></ul>

JavaScript

var data = [
    {
    "parent": "Home",
    "child": [

            ]
    },
    {"parent": "Services",
    "child": [
            {"title":"Infrastruture"},
            {"title":"Development"}

            ]
    },
    {
    "parent": "Sector",
    "child": [
            {"title":"Recruitment Consultant"},
            {"title":"Change Management"},
            {"title":"Industrial Relations"}
            ]
    },          
    ];
$(function() {
    var nav = $("#nav");
    $.each(data,function(idx, obj){
        if(obj.child.length>0)
        {
            nav.append('<li><a href="#">'+obj.parent+'</a><ul id="'+obj.parent+'">'); //Create Parent menu and attach Child menu items list with ID same as parent menu name.
            var parent = $("#"+obj.parent); //Select this parent to insert child items.

            //Insert child menu items.
            $.each(obj.child, function(idx, childobj){
                parent.append('<li><a href="#">'+childobj.title+'</a></li>');
            });
            nav.append('</ul></li>'); //Close each tag.
        }
        else
        {
            nav.append('<li><a href="#">'+obj.parent+'</a></li>'); //No child menu items present, just create parent menu.
        }
    });
});

This could be semantically wrong since we've got so much of markup coupled with JS (not a good idea), but as long as structure remains the same, it is fine to do this way.

Demo Fiddle

P.S.: I'm leaving you with the styling part. Hint: Provide classes along with markup in JS itself. ;-)

edited Feb 21, 2013 at 15:02

answered Feb 21, 2013 at 12:57

Kushal

3,18810 gold badges53 silver badges80 bronze badges

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

6 Comments

Nithin Viswanathan Over a year ago

If i have another subchild field for recruitment menu..How can i integrate that?

Kushal Over a year ago

@NithinViswanath: Then you'll have to add another $.each under new condition within if block, and that should be quite easy to do from above example.

Kushal Over a year ago

@NithinViswanath: You're asking to add another child to your data JSON object or you want to know how to create another sub-menu from child menu item?

Nithin Viswanathan Over a year ago

i know that..but how to create sub child menu?

Kushal Over a year ago

@NithinViswanath: Dude!! as I said its pretty simple if you understood how above code in my answer works, but if you just want code to copy-paste then its not what SO is exactly made for.

|

Jefferson Henrique C. Soares · Accepted Answer · 2013-02-21 11:59:20Z

0

You can access your json like a Javascript Object. You can do things like this:

for (var i = 0; i < data.length; i++) {

    createHeaderLink(data[i].parent);
    createChildLinks(data[i].child);

}

answered Feb 21, 2013 at 11:59

Jefferson Henrique C. Soares

9687 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to create horizontal menu using json object?

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related