1

I want to build sub menu for menu item from json data.

Menu

  <div class="subnav-fixed" id="menuContrainer" runat="server">
        <ul class="nav nav-pills">
           <li id="Li0"><a href="Default.aspx">Home </li>
           <li id="Li1"><a href="InitiativeGrid.aspx">Initiative</a></li>
           <li id="Li2"><a href="Reports.aspx">Reports</a></li>
           <li id="Li3"><a href="EditInitiative.aspx">Edit Initiatives</a></li>            
        </ul>
    </div>

JSON

data =
    "{"d":[
        {"__type":"Tableau_Reports:#CostReductionData",
            "ClientIdx":1,
            "GroupName":"HR",
            "ReportGroup":"1",
            "ReportHeight":"800",
            "ReportName":"Baseline Vs Active Employees",
            "ReportOrder":"0",
            "ReportUrl":"https://company.com/t/sga/views/HRReports/BaselineandActiveEmployees"
        },
        {"__type":"Tableau_Reports:#CostReductionData",
            "ClientIdx":1,
            "GroupName":"HR",
            "ReportGroup":"1",
            "ReportHeight":"800",
            "ReportName":"Level vs Direct Reports",
            "ReportOrder":"0",
            "ReportUrl":"https://company.com/t/sga/views/HRReports/LevelvsDirectReports"
        },
        {"__type":"Tableau_Reports:#Alixpartners.SGACostReductionData",
            "ClientIdx":1,
            "GroupName":"Finance",
            "ReportGroup":"2",
            "ReportHeight":"800",
            "ReportName":"Spans and Layers",
            "ReportOrder":"0",
            "ReportUrl":"https://company.com/t/sga/views/HRReports/SpansandControl"
        }]
    }"

I want to display sub menu for Report menu Item like this

Home Initiative Reports Edit Initiative
                  |
                  HR- Baseline Vs Active Employees
                    - Level vs Direct Reports
                  |
                  Finance - Spans and Layers

How can we do this with Jquery?

Improve this question
2
  • Plenty of easy ways. Are we to assume the incoming data is only meant for the "Reports" menu item? Commented Jun 3, 2013 at 18:07
  • That's true. The data only for reports menu item. Commented Jun 3, 2013 at 18:12

2 Answers 2

Reset to default
4

I'm not sure how you're getting your data, but using jquery to add HTML is phenomenally easy. Base example, you are using $.ajax() to get your data. With your given HTML, and JSON data return, you might do something like:

$(function() {
    $.ajax({
        url: "http://www.yourDomain.com/yourController/yourMethod",
        dataType: "json",
        type: "get",
        beforeSend: function(xhr, settings) {
            $("#Li2").find("ul").remove();
        },
        success: function(data, status, xhr) {
            if (data["d"]) {
                if (data["d"].length) {
                    var items = data["d"],
                        ul = $("<ul />").appendTo($("#Li2"));
                    for (x in items) {
                        var li = $("<li />").appendTo(ul);
                        li.append($("<a />", { href: items[x].ReportUrl, text: items[x].ReportName }));
                    }
                }
            }
        }
    })
})

OR if the JSON is a variable in your JS then you would just use $.each() with same type setup:

$(function() {
    var $ul = $("<ul />").appendTo($("#Li2"));
    $.each(data.d, function(index, item) {
        var li = $("<li />").appendTo($ul);
        li.append($("<a />", { href: item.ReportUrl, text: item.ReportName }));
    })
})

And just for thoroughness, a combo of the 2:

$(function() {
    $.ajax({
        url: "http://www.yourDomain.com/yourController/yourMethod",
        dataType: "json",
        type: "get",
        beforeSend: function(xhr, settings) {
            $("#Li2").find("ul").remove();
        },
        success: function(data, status, xhr) {
            if (data["d"]) {
                if (data["d"].length) {
                    var ul = $("<ul />").appendTo($("#Li2"));
                    $.each(data.d, function(index, item) {
                        var li = $("<li />").appendTo(ul);
                        li.append($("<a />", { href: items[x].ReportUrl, text: items[x].ReportName }));
                    });
                }
            }
        }
    })
})

Further Reading:

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

7 Comments

1) why beforesend: and removing "Li2"? 2). In Success, I did not see creating child items for "Reports" like "HR" and "Finance". So "HR" will have its own children and "Finance" will have its own children.
The remove was just for thoroughness, this would get rid of any previous sub menu that may have existed, thats your choice of course. The creation of the child items is within the for (x in (or $.each) statement where it is filing through each item in the given data set, creating a li for each one and then creating an inner a tag with text and href link.
You did not understand what I'm saying. Now using your code. menu items are creating directly underneath of "Reports". But I am not looking like that. "Reports" will have Groups("GroupName") than each Group will have it children. Menu, sub menu, sub menu items.
@James123 ok, well you're question doesn't get quite that specific. I can't really just "do it for you" can I? It's hard to do when I don't know your end goal. Although I was hoping my answer would give you the tools necessary to figure this out. I pointed out quite well at how to design and append new elements where needed. If I may, write out in HTML a template of what you want the end result of a "group item" to look like within the main ul. Then follow the steps I've shown to create your elements as needed, append them to each other where needed and then add it to the menu.
@James123 If I come across as rude, I apologize, I'm just not sure what else I can do to answer this yet?
|
0

try this logic

var html='<ul>';

$.each(data.d, function(i, item) {
    //alert(item.GroupName);
    html+='<li><a>'+item.GroupName+'</a></li>'
});

html+='</ul>';
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.