Build dynamic sub menu from JSON data using JQuery?

Question

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

  <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?

Plenty of easy ways. Are we to assume the incoming data is only meant for the "Reports" menu item? — SpYk3HH, Jun 03 '13 at 18:07

score 4 · Accepted Answer · edited May 23 '17 at 11:59

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:

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. — James123, Jun 03 '13 at 18:29
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. — SpYk3HH, Jun 03 '13 at 18:32
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, Jun 03 '13 at 18:59
@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. — SpYk3HH, Jun 03 '13 at 19:16
@James123 If I come across as rude, I apologize, I'm just not sure what else I can do to answer this yet? — SpYk3HH, Jun 03 '13 at 19:17
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/31149/discussion-between-james123-and-spyk3hh) — James123, Jun 03 '13 at 20:15

score 0 · Answer 2 · edited Jun 03 '13 at 18:37

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>';

edited Jun 03 '13 at 18:37

Linus Caldwell

10,908
12
46
58

answered Jun 03 '13 at 18:16

Ankush Jain

1,532
1
15
24

Build dynamic sub menu from JSON data using JQuery?

Menu

JSON

2 Answers2