Создание меню в 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

ответ

Смежные вопросы