How to populate JSON data into Bootstrap 4 second level drop down menu

The attached image is my expected result. Every menu item has two more items ‘Dashboard’ and ‘Battery Trends’. Every ‘Dashboard’ and ‘Battery Trends’ will have different URLs, which is defined as ‘navigationurl’ in the JSON file.

I have tried and reached here- https://themepack.net/aaa/jsondata But it’s displaying ‘undefined’.

It’s the HTML code:

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="utf-8" />     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />     <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc." />      <link rel="stylesheet" href="https://dashkit.goodthemes.co/assets/fonts/feather/feather.css" />     <link rel="stylesheet" href="https://dashkit.goodthemes.co/assets/css/theme.min.css"> </head>  <body>      <div class="container">         <div class="row">             <div class="col-md-12">                  <nav class="navbar navbar-expand-lg navbar-light" id="topnav">                     <div class="collapse navbar-collapse mr-lg-auto order-lg-first" id="navbar">                         <ul class="navbar-nav mr-lg-auto">                              <li class="nav-item dropdown">                                 <a class="nav-link dropdown-toggle " href="#" id="topnavDocumentation" role="button"                                     data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Battery Trends</a>                                  <ul class="dropdown-menu" aria-labelledby="topnavDocumentation" id="myDropdown">                                     <li class="dropright">                                      </li>                                 </ul>                              </li>                         </ul>                     </div>                 </nav>              </div>         </div>     </div>       <!-- JAVASCRIPT     ================================================== -->     <script src="https://dashkit.goodthemes.co/assets/libs/jquery/dist/jquery.min.js"></script>     <script src="https://dashkit.goodthemes.co/assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>     <script src="https://dashkit.goodthemes.co/assets/js/dashkit.min.js"></script>      <script>         $(function () {              $.getJSON('dashtrend.json', function (loadMainItem) {                  $.each(loadMainItem.data, function (i, f) {                     var makemenu = "<a href='#' class='dropdown-item dropdown-toggle'  id='" + f.id + "' role='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>" + f.text + "</a>";                      $.each(loadMainItem.data, function (j) {                         makemenu += "<div class='dropdown-menu' aria-labelledby='" + loadMainItem.data[i].items.id + "'><a class='dropdown-item' href='" + loadMainItem.data[i].items.navigationurl + "'>" + loadMainItem.data[j].items.text + "</a></div>";                     })                      // <div class="dropdown-menu" aria-labelledby="ups4">                     //     <a class="dropdown-item" href="/Ups/UpsDashboard?upsid=1">Dashboard</a>                     //     <a class="dropdown-item" href="/Ups/Trends?id=1">Battery Trends</a>                     // </div>                      $(makemenu).appendTo("#myDropdown li");                 });             });          });     </script> </body>  </html> 

And it’s the JSON code:

    {     "data": [         {             "id": 1,             "text": "80KVA Server UPS4\r\n (Out of Warranty)",             "icon": "rowfield",             "navigationurl": null,             "items": [                 {                     "id": 1,                     "text": "DashBoard",                     "icon": "refresh",                     "navigationurl": "/Ups/UpsDashboard?upsid=1",                     "items": []                 },                 {                     "id": 1,                     "text": "Battery Trends",                     "icon": "tips",                     "navigationurl": "/Ups/Trends?id=1",                     "items": []                 }             ]         },         {             "id": 2,             "text": "80KVA Server UPS5\r\n (Out of Warranty)",             "icon": "rowfield",             "navigationurl": null,             "items": [                 {                     "id": 2,                     "text": "DashBoard",                     "icon": "refresh",                     "navigationurl": "/Ups/UpsDashboard?upsid=2",                     "items": []                 },                 {                     "id": 2,                     "text": "Battery Trends",                     "icon": "tips",                     "navigationurl": "/Ups/Trends?id=2",                     "items": []                 }             ]         },         {             "id": 3,             "text": "80KVA EL\r\n (Out of Warranty)",             "icon": "rowfield",             "navigationurl": null,             "items": [                 {                     "id": 3,                     "text": "DashBoard",                     "icon": "refresh",                     "navigationurl": "/Ups/UpsDashboard?upsid=3",                     "items": []                 },                 {                     "id": 3,                     "text": "Battery Trends",                     "icon": "tips",                     "navigationurl": "/Ups/Trends?id=3",                     "items": []                 }             ]         },         {             "id": 4,             "text": "60KVA W/S Hub UPS1\r\n",             "icon": "rowfield",             "navigationurl": null,             "items": [                 {                     "id": 4,                     "text": "DashBoard",                     "icon": "refresh",                     "navigationurl": "/Ups/UpsDashboard?upsid=4",                     "items": []                 },                 {                     "id": 4,                     "text": "Battery Trends",                     "icon": "tips",                     "navigationurl": "/Ups/Trends?id=4",                     "items": []                 }             ]         },         {             "id": 5,             "text": "60KVA W/S Hub UPS2",             "icon": "rowfield",             "navigationurl": null,             "items": [                 {                     "id": 5,                     "text": "DashBoard",                     "icon": "refresh",                     "navigationurl": "/Ups/UpsDashboard?upsid=5",                     "items": []                 },                 {                     "id": 5,                     "text": "Battery Trends",                     "icon": "tips",                     "navigationurl": "/Ups/Trends?id=5",                     "items": []                 }             ]         }     ],     "totalCount": -1,     "groupCount": -1,     "summary": null } 

How to I can populate the second level dropdown item and get the expected result?

[NB: I’ll apply the code into an ASP.NET project. So if you have any dependencies, you can mention it.]

Expected Result

Thanks

Professor Asked on October 26, 2020 in Android langue.
Add Comment
1 Answer(s)

I have made some updates to your code and achieve your desire results. Change your code accordingly.

Here is JavaScript code. Note changes

<ul class="dropdown-menu" aria-labelledby="topnavDocumentation" id="myDropdown">            //Just removed <li></li> from here              </ul>  <script>     $(function () {          $.getJSON('dashtrend.json', function (loadMainItem) {              $.each(loadMainItem.data, function (i, f) {                 var makemenu = "<li class='dropright'><a href='#' class='dropdown-item dropdown-toggle'  id='" + f.id + "' role='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>" + f.text + "</a>";                 makemenu += "<div class='dropdown-menu' aria-labelledby='test'>";                 $.each(f.items, function (j) {                         makemenu += "<a class='dropdown-item' href='" + f.items[j].navigationurl + "'>" + f.items[j].text + "</a>";                  })                 makemenu += "</div></li>";                  // <div class="dropdown-menu" aria-labelledby="ups4">                 //     <a class="dropdown-item" href="/Ups/UpsDashboard?upsid=1">Dashboard</a>                 //     <a class="dropdown-item" href="/Ups/Trends?id=1">Battery Trends</a>                 // </div>                  $(makemenu).appendTo("#myDropdown");             });         });      }); </script> 

1) I have removed the list from ul in HTML

2) I have updated your JavaScript code

Professor Answered on October 26, 2020.
Add Comment

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.