title: Bootstrap 4 navigation bar using json
body: <p>I want to create navigation bar using bootstrap 4 navigation bar and i want to add items inside there using json.</p>
  
  <p>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.</p>
  
  <p>HTML</p>
  
  <pre><code>    &lt;nav class="navbar navbar-expand-lg navbar-light bg-light"&gt;
          &lt;a class="navbar-brand" href="#"&gt;Navbar&lt;/a&gt;
          &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
              aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"&gt;
              &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;div class="collapse navbar-collapse" id="navbarNav results_buttons"&gt;
              &lt;ul class="navbar-nav"&gt;
                  &lt;li class="nav-item active"&gt;
                      &lt;a class="nav-link" href="#"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href="#"&gt;Features&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href="#"&gt;Pricing&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>        $(document).ready(function () {
              $.getJSON('events.json', function (data) {
                  var results_buttons = '';
                  $.each(data, function (key, value) {
                      results_buttons += '&lt;ul&gt;';
                      results_buttons += '&lt;li"&gt;' + value.name + '&lt;/li&gt;';
                      results_buttons += '&lt;/ul&gt;';
                  });
                  $('#results_buttons').append(results_buttons);
              });
          });
  </code></pre>
  
  <p>JSON</p>
  
  <pre><code>[
          {
              "id" : "1", 
              "name" : "100m"
          },
  
          {
              "id" : "2", 
              "name" : "Long Jump"
          },
  
          {
              "id" : "3", 
              "name" : "Shot Put"
          },
  
          {
              "id" : "4", 
              "name" : "High Jump"
          }
  ]
  </code></pre>
  
  <p>Ideal result should look like normal bootstrap 4 menu but with taking information from json.</p>