Как создать навигационную панель Bootstrap4 с меню и подменю с данными JSON?

Question

У меня есть строка JSON, из которой я хочу создать панель навигации Bootstrap 4.Поскольку я новичок в JavaScript и jQuery, я не понимаю, как этого добиться.

Вот мои данные JSON:

var data = {
    "Setup":
        [
            {  "type": "Submenu-1" },

            {  "type": "submenu-2" }
        ],
    "Report":
        [
            {  "type": "subreport-1" },

            {  "type": "subreport-2" }
             ],
    "logout":
        []

};

Я хочу иметь панель навигации типа

<link rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
	<button class="navbar-toggler" type="button" data-toggle="collapse"
		data-target="#navbarSupportedContent"
		aria-controls="navbarSupportedContent" aria-expanded="false"
		aria-label="Toggle navigation">
		<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse" id="navbarSupportedContent">
		<ul class="navbar-nav mr-auto">
			<!-- Links -->
			<!-- DropDown -->

			<!-- setup -->

			<li class="nav-item dropdown">

					<a class="nav-link dropdown-toggle" href="" id="navbardrop"
						data-toggle="dropdown"> Setup </a>
				
				
				<div id="drop" class="dropdown-menu">
					
						<a class="dropdown-item" href="#"> submenu-1</a>
						<a class="dropdown-item" href="#"> submenu-2</a>
				
				</div></li>
			
			<li class="nav-item dropdown">
					<a class="nav-link dropdown-toggle" href="#" id="navbardrop"
						data-toggle="dropdown"> Report </a>
				
				<div class="dropdown-menu">
				
					
						<a class="dropdown-item" href="">subreport-1</a>
						<a class="dropdown-item" href="">subreport-2</a>
				

				</div></li>
			

			<li class="nav-item">
			  
				<a class="nav-link" href="">Logout</a>
			 </li>
		</ul>
	</div>
	</nav>
  
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
	<script
		src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
	<script
		src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>

Я не знаю, как этого добиться с помощью JavaScript или jQuery - как этого добиться?

Мои данные JSON являются динамическими;оно может варьироваться от 3 до 6-7 меню, также как и для подменю.

Answer 1

Надеюсь, это поможет сгенерировать динамическую навигационную панель из данных Json.

var data = {
    "Setup":
        [
            {  "type": "Submenu-1", "link" : "https://www.google.com" },
            {  "type": "submenu-2", "link" : "https://www.google.com" }
        ],
    "Report":
        [
            {  "type": "subreport-1", "link" : "https://www.google.com" },
            {  "type": "subreport-2", "link" : "https://www.google.com" }
        ],
    "logout":
        []

};

$(document).ready(function() {
	
	for (var item in data) { 
    	var _menu = "";
        var _submenuData = data[item];
        if(_submenuData.length > 0) {
        	var _submenu = "";
            
        	for(var i = 0; i < _submenuData.length; i++) {
            	_submenu += "<a class='dropdown-item' href='" + _submenuData[i]["link"] + "'>" + _submenuData[i]["type"] + "</a>";
        }
        
        _menu = "<li class='nav-item dropdown'>"
        		+ "<a class='nav-link dropdown-toggle' href='' id='navbardrop' data-toggle='dropdown'> " + item + " </a>"
                + "<div id='drop' class='dropdown-menu'>"
                + _submenu
				+ "</div>"
                + "</li>";
        }
        else {
        	_menu = "<li class='nav-item'>"
        		+ "<a class='nav-link' href=''> " + item + " </a>"
                + "</li>";
        }
        
        $("#navbarId").append(_menu);
    }

});

<link rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
	<script
		src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
	<script
		src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
    
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
	<button class="navbar-toggler" type="button" data-toggle="collapse"
		data-target="#navbarSupportedContent"
		aria-controls="navbarSupportedContent" aria-expanded="false"
		aria-label="Toggle navigation">
		<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse" id="navbarSupportedContent">
		<ul id="navbarId" class="navbar-nav mr-auto">
		</ul>
	</div>
	</nav>