CODEWITHSUNDEEP
javascriptjqueryhtmljson
Nithin Viswanathan
Nithin Viswanathan

Reputation: 3283

How can I retrieve elements from the given json

I want to iterate each data from the given json menu json is

var jsonMenu = {

    "menu": [
        {
            "MenuId": "ApplicationId",
            "MenuName": "Application",
            "MenuLink": "#",
            "Submenu":
                [
                    {
                        "MenuId": "BasicInformationId",
                        "MenuName": "Basic Information",
                        "MenuLink": "#"
                    }
                ]
        },

        {
            "MenuId": "ReviewandSubmissionID",
            "MenuName": "Review and Submission",
            "MenuLink": "#"
        }

]
}

I used the given code for iterating the main menu and it is worked

$.each(jsonMenu, function (key3, value3) {
                $('<li id="' + value3.MenuId + '" class="menu-li"><span><img src="../Images/tab_arrow.png"/></span><a href="' + value3.MenuLink + '">' + value3.MenuName + '</a></li>').appendTo("#menuLeft");
});

But how can I retrieve the submenu from the given json?

Upvotes: 3

Views: 84

Answers (3)

Milimetric
Milimetric

Reputation: 13549

Honestly, you should probably use a template framework for this. Mustache is pretty simple and light weight. And you can even handle arbitrarily deep "Submenu" trees by recursively referencing a Submenu template.

But, in the spirit of answering your question directly, I would make a function to add your Submenus to your parent menu. And a function to create the links. Instead of repeating all the code, you know? Like this:

function makeChildren(parentMenu){
    var html = $('<ul></ul>');
    var children = 'menu' in parentMenu ? 'menu' : 'Submenu';
    if (typeof parentMenu[children] === 'undefined' ||
        !parentMenu[children].length) {
        return html;
    }
    $.each(parentMenu[children], function(key, val){
        html.append($('<li><span><img alt="use css"/></span></li>')
            .attr('id', val.MenuId)
            .addClass('menu-li')
            .append(makeLink(val))
            .append(makeChildren(val))
        );
    });
    return html;
}

function makeLink(menu){
    return $('<a></a>')
        .attr('href', menu.MenuLink)
        .text(menu.MenuName);
}

And here's a working fiddle if you want to play with it. You basically call makeChildren on your jsonMenu:

http://jsfiddle.net/VLwjV/

Upvotes: 0

Ram
Ram

Reputation: 144689

You should use another loop inside your current loop:

$.each(jsonMenu.menu, function (key, value) {
    var $li = $('<li id="' + value.MenuId + '" class="menu-li"><span></span><a href="' + value.MenuLink + '">' + value.MenuName + '</a></li>');
    if (value.Submenu) {
        var $ul = $('<ul/>').appendTo($li);
        $.each(value.Submenu, function (_, v) {
            $ul.append('<li><a href="#">' + v.MenuName + '</a>...</li>');
        });
    }
    $li.appendTo("#menu");
});

http://jsfiddle.net/7x5En/

For efficiency you can also use a for loop instead of the $.each() utility function and for avoiding generating nested empty ul elements(for empty Submenu arrays) you can check the existence of the Submenu property using typeof operator: 

if (typeof value.Submenu !== 'undefined' && value.Submenu.length) { // ...  }

Upvotes: 2

mayabelle
mayabelle

Reputation: 10014

This works to create a hierarchy from your json:

$.each(jsonMenu, function (key3, value3) {
            $('<li id="' + value3.MenuId + '" class="menu-li"><span><img src="../Images/tab_arrow.png"/></span><a href="' + value3.MenuLink + '">' + value3.MenuName + '</a></li>').appendTo("#menuLeft");
            $('<ul></ul>').appendTo("#" + value3.MenuId);
            $.each(value3, function (key, value) {
                    $('<li id="' + value.MenuId + '" class="menu-li"><span><img src="../Images/tab_arrow.png"/></span><a href="' + value.MenuLink + '">' + value.MenuName + '</a></li>').appendTo("#" + value3.MenuId + ' ul');
            });
    });

Fiddle: http://jsfiddle.net/XVL69/

Upvotes: 1

Related Questions