Making a menu in json
<p>I'm trying to display json into a bootstrap menu.  But I don't know how to do it. I would like to do this with jquery but mybe an only javascript code is more simple.  I tried like this. I used jquery library.</p>

<p>thanks for your help</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>{
  "refs":
    [
        {
          "category" : "webdev",
          "title" : "Référence CSS : Codrops",
          "description" : "LA référence CSS à avoir dans ses bookmarks : complète et très didactique. Avec notamment une très bonne introduction à Flexbox ",
          "link" : "http://tympanus.net/codrops/css_reference/flexbox/",
          "miniature" : "http://codropspz.tympanus.netdna-cdn.com/codrops/wp-content/uploads/2015/02/cssrefmain.jpg"
        },
        {
          "category" : "webdesign",
          "title" : "A second link to try",
          "description" : "Obviously, this is a really intersting link",
          "link" : "the link",
          "miniature" : "http://codropspz.tympanus.netdna-cdn.com/codrops/wp-content/uploads/2015/02/cssrefmain.jpg"
        },
        {
          "category" : "webdev",
          "title" : "A third link to try",
          "description" : "Obviously, this is a really intersting link",
          "link" : "the link",
          "miniature" : "http://codropspz.tympanus.netdna-cdn.com/codrops/wp-content/uploads/2015/02/cssrefmain.jpg"
        },
        {
          "category" : "divers",
          "title" : "A fourth link to try",
          "description" : "Obviously, this is a really intersting link",
          "link" : "the link",
          "miniature" : "http://codropspz.tympanus.netdna-cdn.com/codrops/wp-content/uploads/2015/02/cssrefmain.jpg"
        },
        {
          "category" : "webdev",
          "title" : "Javascript ",
          "description" : "Obviously, this is a really intersting link",
          "link" : "http://www.w3.org/wiki/JavaScript_best_practices",
          "miniature" : "http://codropspz.tympanus.netdna-cdn.com/codrops/wp-content/uploads/2015/02/cssrefmain.jpg"
        }

      ]</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;!-- Latest compiled and minified CSS --&gt;
&lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;

&lt;!-- jQuery library --&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;!-- Latest compiled JavaScript --&gt;
&lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;title&gt;Loïc did it&lt;/title&gt;
&lt;meta charset="utf-8" /&gt;

&lt;script type="text/javascript"&gt;

    

 $.getJSON("references.json",
        function (json) {
            var ul;
        li = $('&lt;/ul&gt;');
        li.append("&lt;li&gt; " + json.category + "&lt;/li&gt;")
        $('#menu').append(ul);
        });


&lt;/script&gt;

&lt;/head&gt;


&lt;body&gt;
&lt;nav class="navbar navbar-default"&gt;
    &lt;div class="container-fluid"&gt;
        &lt;div class="navbar-header"&gt;
            &lt;a class="navbar-brand" href="index.html"&gt;Vidéos&lt;/a&gt;
        &lt;/div&gt;
        &lt;div&gt;
            &lt;ul class="nav navbar-nav" id="menu"&gt;
                &lt;li class="active"&gt;&lt;a href="index.html"&gt;accueil&lt;/a&gt;&lt;/li&gt;
                

            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/nav&gt;



&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>