如何從json中獲取數據而不是jquery插件中的html標籤？

Question

我有一個jquery plugin從HTML元素中獲取數據這樣如下：

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