如何从jquery插件中的json而不是html标签中获取数据？

Question

我有一个从html元素获取数据的jquery plugin，如下所示：

​

<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>

​

它通过数据菜单和数据子菜单属性来诊断父子菜单。.Now我通过不带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的元素应该是你的插件的容器，你可以在它解析你的元素之前插入。

您的示例的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"
        }
    ]
}