Bootstrap Nave Bar из данных JSON дает несколько другой результат

Question

Я создаю загрузчик navebar из данных JSON, и я сделал это почти.я сталкиваюсь с проблемой только в одном месте

var data = {
  				  "India": [
  				          {
  				            "type": "delhi",
  				            "link": "https: //www.google.com"
  				          },
  				          {
  				            "type": "mumbai",
  				            "link": "https: //www.google.com"
  				          }
  				        ],
  				        "australia": [
  				          {
  				            "type": "sydney",
  				            "link": "https: //www.google.com"
  				          },
  				          {
  				            "type": "melbourn",
  				            "link": "https: //www.google.com"
  				          }
  				        ],
  				        "spain": [
  				          {
  				            "type": "valencia",
  				            "link": "https: //www.google.com"
  				          },
  				          {
  				            "type": "madrid",
  				            "link": "https: //www.google.com"
  				          }
  				        ],
  				        "logout": [
  				          {
                    "type": "",
  				            "link": "Logout servlet"
  				          }
  				        ]
  				      }

$(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>";    //here at href i want to use the link i am getting in json
        }
        
        $("#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>

для выхода из системы я получаю type = "" и ссылку: "LogoutServlet" я не хочу показывать его в раскрывающемся списке, я только хочу, чтобы он был в меню и включеннажав на это, он должен перейти по ссылке.Я хочу, чтобы Выход из системы был только меню

Кто-нибудь может мне помочь

Answer 1

Каждый массив объектов содержит 2 элемента, кроме массива выхода из системы, который содержит только один.Поэтому измените выражение if в своем JavaScript, чтобы отразить это.

if(_submenuData.length > 1) {

Редактировать:

Добавлено _submenuData[0].link внутри else ... href:

---

var data = {
    "India": [
        {
            "type": "delhi",
            "link": "https: //www.google.com"
        },
        {
            "type": "mumbai",
            "link": "https: //www.google.com"
        }
    ],
    "australia": [
        {
            "type": "sydney",
            "link": "https: //www.google.com"
        },
        {
            "type": "melbourn",
            "link": "https: //www.google.com"
        }
    ],
    "spain": [
        {
            "type": "valencia",
            "link": "https: //www.google.com"
        },
        {
            "type": "madrid",
            "link": "https: //www.google.com"
        }
    ],
    "logout": [
        {
            "type": "",
            "link": "Logout servlet"
        }
    ]
}

$(document).ready(function() {
    for (var item in data) {
        var _menu = "";
        var _submenuData = data[item];
        if(_submenuData.length > 1) {
            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='"+ _submenuData[0].link +"'> " + 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>