I would like to create a menu from multiple JSON files.
Please see the following: https://jsfiddle.net/varJSFiddle/teghqov0/10/
The desired output would be a dynamic menu that looks something like:
<ul class="filter-menu-wrapper">
<li class="filter-menu is-active" id="filter-menu_01"><span class="filter-category">Type<i class='cstm-icon-glyph cstm-icon-glyph-plus'></i></span>
<div class="filter-options">
<span class="filter-option" data-filter="">any</span>
<span class="filter-option" data-filter=".TypeHuman">Human</span>
<span class="filter-option" data-filter=".TypeBlue">Blue</span>
<span class="filter-option thefirst" data-filter=".TypeRed">Red</span>
<span class="filter-option" data-filter=".TypeSpirit">Spirit</span>
</div>
</li>
<li class="filter-menu" id="filter-menu_02"><span class="filter-category">Special<i class='cstm-icon-glyph cstm-icon-glyph-plus'></i></span>
<div class="filter-options">
<span class="filter-option" data-filter="">any</span>
<span class="filter-option" data-filter=".SpecialFireflies">Fireflies</span>
<span class="filter-option" data-filter=".SpecialButterfly">Butterfly</span>
<span class="filter-option" data-filter=".SpecialFoxFire">Fox Fire</span>
<span class="filter-option" data-filter=".SpecialSmoke">Smoke</span>
<span class="filter-option" data-filter=".SpecialSakura">Sakura</span>
<span class="filter-option" data-filter=".SpecialFire">Fire</span>
<span class="filter-option" data-filter=".SpecialEarth">Earth</span>
<span class="filter-option" data-filter=".SpecialWater">Water</span>
<span class="filter-option" data-filter=".SpecialLightning">Lightning</span>
</div>
</li>
<li class="filter-menu" id="filter-menu_03"><span class="filter-category">Clothing<i class='cstm-icon-glyph cstm-icon-glyph-plus'></i></span>
<div class="filter-options">
<span class="filter-option" data-filter="">any</span>
<span class="filter-option" data-filter=".ClothingLightKimono">Light Kimono</span>
<span class="filter-option" data-filter=".ClothingMaroonYukata">Maroon Yukata</span>
<span class="filter-option" data-filter=".ClothingBlueKimono">Blue Kimono</span>
<span class="filter-option" data-filter=".ClothingGreenYukata">Green Yukata</span>
</div>
</li>
</ul>
2
Answers
MAYUR, I ended up with the following. It works perfectly however it is a little slow. If you have any tips on improving the speed, let me know:
i think you need like below output , try it, comment if query