Bootstrap 4 navigation bar using json

Question

I want to create navigation bar using bootstrap 4 navigation bar and i want to add items inside there using json.

I've tried few ideas i've had and googled for some but there is not alot of people who have tried to do it, so i thought maybe someone here can help me out.

HTML

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav results_buttons">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Features</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Pricing</a>
                </li>
            </ul>
        </div>
    </nav>

JS

        $(document).ready(function () {
            $.getJSON('events.json', function (data) {
                var results_buttons = '';
                $.each(data, function (key, value) {
                    results_buttons += '<ul>';
                    results_buttons += '<li">' + value.name + '</li>';
                    results_buttons += '</ul>';
                });
                $('#results_buttons').append(results_buttons);
            });
        });

JSON

[
        {
            "id" : "1", 
            "name" : "100m"
        },

        {
            "id" : "2", 
            "name" : "Long Jump"
        },

        {
            "id" : "3", 
            "name" : "Shot Put"
        },

        {
            "id" : "4", 
            "name" : "High Jump"
        }
]

Ideal result should look like normal bootstrap 4 menu but with taking information from json.

Answer 1

Your navbar has an invalid id . There should be no spaces:

<div class="collapse navbar-collapse" id="navbarNav results_buttons">

So assuming the proper id is navbarNav , here's a working demo for you:

 // Make sure to point to the proper JSON file. Here I used CodePen for demo purposes. $.getJSON( 'https://codepen.io/anon/pen/QPvNQg.html', function( data ){ var $menu = $( '#navbarNav ul.navbar-nav' ); $.each( data, function(){ var url = this.url || '#'; $menu.append( '<li class="nav-item">' + '<a class="nav-link" href="' + url + '">' + ( this.name || this.id ) + '</a>' + '</li>' ); }); });

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> </ul> </div> </nav> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Answer 2

If using react, you can also try reactstrap-json-nav

npm i reactstrap-json-nav

import Nav from 'reactstrap-json-nav'

let json = [
  {name: 'Components', url: '/components/'},
  {name: 'GitHub', url: 'https://github.com/reactstrap/reactstrap'}
]

export default () => (
   <Nav json={json}
)