How to get data from json instead of html tags in jquery plugin?

Question

I have a jquery plugin that get data from html elements like this below:

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

it diagnose parent and child by data-menu and data-submenu properties .Now I get all data by a json array without html tags. how can I do it ?

Answer 1

Of course you can use JavaScript to read JSON firstly and convert them into HTML tag before the plugin read those. Like:

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

The element with class name data-container should be the container of your plugin, and you can just insert before it parse your elemnts.

The src/data.json of your example should be like this:

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