jqueryプラグインのhtmlタグの代わりにjsonからデータを取得するには？

Question

私は以下のようなHTML要素からデータを取得jquery plugin持っている：私は、すべてのデータを取得.Nowそれは、データメニューとデータ・サブメニューのプロパティで親と子を診断

<ul data-menu="main" class="menu__level"> 
 
    <li class="menu__item"><a class="menu__link" data-submenu="submenu-1" href="#">Vegetables</a></li> 
 
    <li class="menu__item"><a class="menu__link" data-submenu="submenu-2" href="#">Fruits</a></li> 
 
    <li class="menu__item"><a class="menu__link" data-submenu="submenu-3" href="#">Grains</a></li> 
 
    <li class="menu__item"><a class="menu__link" data-submenu="submenu-4" href="#">Mylk &amp; Drinks</a></li> 
 
</ul> 
 
<!-- Submenu 1 --> 
 
<ul data-menu="submenu-1" class="menu__level"> 
 
    <li class="menu__item"><a class="menu__link" href="#">Stalk Vegetables</a></li> 
 
    <li class="menu__item"><a class="menu__link" href="#">Roots &amp; Seeds</a></li> 
 
    <li class="menu__item"><a class="menu__link" href="#">Cabbages</a></li> 
 
    <li class="menu__item"><a class="menu__link" href="#">Salad Greens</a></li> 
 
    <li class="menu__item"><a class="menu__link" href="#">Mushrooms</a></li> 
 
    <li class="menu__item"><a class="menu__link" data-submenu="submenu-1-1" href="#">Sale %</a></li> 
 
</ul> 
 
<!-- Submenu 1-1 --> 
 
<ul data-menu="submenu-1-1" class="menu__level"> 
 
    <li class="menu__item"><a class="menu__link" href="#">Fair Trade Roots</a></li> 
 
    <li class="menu__item"><a class="menu__link" href="#">Dried Veggies</a></li> 
 
    <li class="menu__item"><a class="menu__link" href="#">Our Brand</a></li> 
 
    <li class="menu__item"><a class="menu__link" href="#">Homemade</a></li> 
 
</ul>

をhtmlタグのないjson配列どうすればいい？

Answer 1

もちろん、JavaScriptを使用してまずJSONを読み込み、プラグインがそれらを読み込む前にHTMLタグに変換することができます。同様：

<div class="data-container"> 
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
<script type="text/javascript"> 
    $.getJSON('src/data.json', {}, function(json, textStatus) { 
     /** optional stuff to do after success */ 
     for (var i in json) { 
      var lists = ''; 

      for (var j = 0; j < json[i].length; j++) { 
       lists += '<li class="menu__item"><a class="menu__link" ' + (json[i][j].submenu === '' ? '' : 'data-submenu="' + json[i][j].submenu + '"') + ' href="' + json[i][j].href + '">' + json[i][j].children + '</a></li>'; 
      } 

      $('.data-container').append('<ul data-menu="' + i + '" class="menu__level">' + lists + '</ul>'); 
     } 
    }); 
</scirpt> 
</div> 

クラス名data-containerを持つ要素は、プラグインのコンテナであるべきであり、それはあなたのelemntsを解析する前に、あなただけ挿入することができます。あなたの例の

src/data.jsonは次のようにする必要があります：データから来ている

{ 
    "main": [ 
     { 
      "submenu": "submenu-1", 
      "href": "#", 
      "children": "Vegetables" 
     }, 
     { 
      "submenu": "submenu-2", 
      "href": "#", 
      "children": "Fruits" 
     }, 
     { 
      "submenu": "submenu-3", 
      "href": "#", 
      "children": "Grains" 
     }, 
     { 
      "submenu": "submenu-4", 
      "href": "#", 
      "children": "Mylk & Drinks" 
     } 
    ], 
    "submenu-1": [ 
     { 
      "submenu": "", 
      "href": "#", 
      "children": "Stalk Vegetables" 
     }, 
     { 
      "submenu": "", 
      "href": "#", 
      "children": "Roots & Seeds" 
     }, 
     { 
      "submenu": "", 
      "href": "#", 
      "children": "Cabbages" 
     }, 
     { 
      "submenu": "", 
      "href": "#", 
      "children": "Salad Greens" 
     }, 
     { 
      "submenu": "", 
      "href": "#", 
      "children": "Mushrooms" 
     }, 
     { 
      "submenu": "submenu-1-1", 
      "href": "#", 
      "children": "Sale %" 
     } 
    ], 
    "submenu-1-1": [ 
     { 
      "submenu": "", 
      "href": "#", 
      "children": "Fair Trade Roots" 
     }, 
     { 
      "submenu": "", 
      "href": "#", 
      "children": "Dried Veggies" 
     }, 
     { 
      "submenu": "", 
      "href": "#", 
      "children": "Our Brand" 
     }, 
     { 
      "submenu": "", 
      "href": "#", 
      "children": "Homemade" 
     } 
    ] 
}