How can I generate a horizontal navigation bar using a JSON structure?

Question

How can I generate a horizontal navigation bar using a JSON structure?

I have a JSON object that looks like this:

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

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

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

I am looking to create a horizontal menu based on this JSON structure. Since I am new json objects, can someone guide me on how to achieve this?

javascript jquery html json css

Answer 1

Answer №1

To accomplish this task, follow these steps.

Code Explanation

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

JavaScript Logic

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+'">'); 
            var parent = $("#"+obj.parent); 

            $.each(obj.child, function(idx, childobj){
                parent.append('<li><a href="#">'+childobj.title+'</a></li>');
            });
            nav.append('</ul></li>'); 
        }
        else
        {
            nav.append('<li><a href="#">'+obj.parent+'</a></li>');
        }
    });
});

This approach may be unconventional due to the mix of markup and JavaScript, but as long as the structure is maintained, it is acceptable.

Check out the live demonstration here

P.S.: The styling aspect is left for you to handle. Consider including classes in your JS along with markup. Enjoy! ;-)

Answer 2

To accomplish this task, follow these steps.

Code Explanation

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

JavaScript Logic

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+'">'); 
            var parent = $("#"+obj.parent); 

            $.each(obj.child, function(idx, childobj){
                parent.append('<li><a href="#">'+childobj.title+'</a></li>');
            });
            nav.append('</ul></li>'); 
        }
        else
        {
            nav.append('<li><a href="#">'+obj.parent+'</a></li>');
        }
    });
});

This approach may be unconventional due to the mix of markup and JavaScript, but as long as the structure is maintained, it is acceptable.

Check out the live demonstration here

P.S.: The styling aspect is left for you to handle. Consider including classes in your JS along with markup. Enjoy! ;-)

Answer 3

Answer №2

Your JSON data can be manipulated similar to a Javascript Object. Here is an example of how you can interact with it:

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

    generateHeaderLink(data[i].parent);
    generateChildLinks(data[i].child);

}

Answer 4

Your JSON data can be manipulated similar to a Javascript Object. Here is an example of how you can interact with it:

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

    generateHeaderLink(data[i].parent);
    generateChildLinks(data[i].child);

}

How can I generate a horizontal navigation bar using a JSON structure?

Answer №1

Answer №2

Similar questions

The <pre> tag is not adjusting the column width properly within the Bootstrap framework

Svelte is unable to bring in

Webpage refreshing when resizing browser

Using VUE-JS to implement checkbox functionality with v-model

Select the radio button by hovering the mouse over it

Choose options from an array in AngularJS using the same ng-model for a dropdown menu

Troubleshooting problems in Android with parsing String/JSON data

Is it possible to insert JavaScript code with the <link> element?

Generating a complex, nested array using dynamic loops from JSON data

Combining AngularJS with Bridgeit.js for a seamless mobile web app experience

What is the best way to deploy a Vue Webpack application using Sails.js?

What is the best way to implement window.load in React Native?

Transmit information via ajax and receive responses in json format

`Div Elements Overlapping`

What could be causing WidgEditor, the JavaScript text editor, to fail to submit any values?

The problem with the pathLength property is causing my path animation to malfunction

Leverage object properties as data table field values in VueJS

Suggestions on employing Nashorn and Reactjs for serverside rendering in a production environment

When entering data into the HBase database, the """ character is being substituted with "x5C"

Is it possible to adjust the dimensions of the number input spinner?