在json中製作菜單

-2

我試圖在引導菜單中顯示json。但我不知道該怎麼做。我想用jQuery來做到這一點，但mybe只是一個JavaScript代碼更簡單。我試過這樣。我用jQuery庫。在json中製作菜單

感謝您的幫助

{ 
 
    "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" 
 
     } 
 

 
     ]

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 

 
<!-- jQuery library --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

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

 
<script type="text/javascript"> 
 

 
    
 

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

 

 
</script> 
 

 
</head> 
 

 

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

 
      </ul> 
 
     </div> 
 
    </div> 
 
</nav> 
 

 

 

 
</body> 
 
</html>

來源

2016-03-01 Loïc Losson

仔細看看你的變量名稱...... – PeeHaa

謝謝，但我看着這個，什麼也找不到。 –

好吧，它不像是有很多線路，所以錯誤應該很容易找到。也應該「總是」使用[嚴格模式]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode），這也會造成錯誤。 – PeeHaa

<!DOCTYPE html> 
<html> 
<head> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <!-- jQuery library --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <!-- Latest compiled JavaScript --> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
    <title>Loïc did it</title> 
    <meta charset="utf-8" /> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $.getJSON("references.json", 
        function (json) { 
         var li = ''; 
         $.each(json.refs, function (index, responce) { 
          var cls = (index == 0 ? "active" : ""); 
          li += "<ul class=\"nav navbar-nav\" ><li class=\"" + cls + "\"><a > " + $(this)[0].category + "</a></li></ul>"; 
         }); 
         $('#menu').html(li); 
        }); 
     }); 
    </script> 
</head> 
<body> 
    <nav class="navbar navbar-default"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <a class="navbar-brand" href="index.html">Vidéos</a> 
      </div> 
      <div id="menu"> 
      </div> 
     </div> 
    </nav> 
</body> 
</html>

來源

2016-03-01 10:07:05 baj9032

謝謝它的作品！ –

您的類別項目陣列都在裏面參jobject你必須通過數組循環並獲得類別名稱

$.each(jsondata.refs, function(i, d) { 
    console.log(d.category) 
    $("#menu").append("<li>" + d.category + "</li>") 
});

這裏的鏈接https://jsfiddle.net/4196np59/

來源

2016-03-01 09:54:49 Johncena365

在json中製作菜單

回答

相關問題