Dynamic Menu from multiple JSON files-CodePudding

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 >
    <li  id="filter-menu_01"><span >Type<i class='cstm-icon-glyph cstm-icon-glyph-plus'></i></span>
        <div >
            <span  data-filter="">any</span>
            <span  data-filter=".TypeHuman">Human</span>
            <span  data-filter=".TypeBlue">Blue</span>
            <span  data-filter=".TypeRed">Red</span>
            <span  data-filter=".TypeSpirit">Spirit</span>
        </div>
    </li>
    <li  id="filter-menu_02"><span >Special<i class='cstm-icon-glyph cstm-icon-glyph-plus'></i></span>
        <div >
            <span  data-filter="">any</span>
            <span  data-filter=".SpecialFireflies">Fireflies</span>
            <span  data-filter=".SpecialButterfly">Butterfly</span>
            <span  data-filter=".SpecialFoxFire">Fox Fire</span>
            <span  data-filter=".SpecialSmoke">Smoke</span>
            <span  data-filter=".SpecialSakura">Sakura</span>
            <span  data-filter=".SpecialFire">Fire</span>
            <span  data-filter=".SpecialEarth">Earth</span>
            <span  data-filter=".SpecialWater">Water</span>
            <span  data-filter=".SpecialLightning">Lightning</span>
        </div>
    </li>
    <li  id="filter-menu_03"><span >Clothing<i class='cstm-icon-glyph cstm-icon-glyph-plus'></i></span>
        <div >
            <span  data-filter="">any</span>
            <span  data-filter=".ClothingLightKimono">Light Kimono</span>
            <span  data-filter=".ClothingMaroonYukata">Maroon Yukata</span>
            <span  data-filter=".ClothingBlueKimono">Blue Kimono</span>
            <span  data-filter=".ClothingGreenYukata">Green Yukata</span>
        </div>
    </li>
</ul>

CodePudding user response：

i think you need like below output , try it, comment if query

$(document).ready(function() {
    
    // 1.) create an attributes (trait) array
    // 2.) loop through the items, check if the trait is already in the array, if not then add it
    // 3.) loop over attributes array and create the menu items off that.
    
    var loopFunction = function(dataIsLoading) { // the loop
        
        var itemURI = "https://ikzttp.mypinata.cloud/ipfs/QmQFkLSQysj94s5GvTHPyzTxrawwtjgiiYS2TBLgrvw8CW/"
        
        var myArray = []; // create an array to capture all traits
        
        for (let i = 0; i < 4; i  ) {
            
            $.getJSON(itemURI i, function(data) {
                
                var menuItems = "";
                var headings = "";
                var subheadings = "";
                var dataFilter = "";
                
                $.each(data.attributes,function(index,entry) { // i (index), e (entry)
                    
                    headings = entry.trait_type;
                    subheadings = entry.value;
                    dataFilter = entry.trait_type   entry.value;
                    dataFilter = dataFilter.replace(/ /g, '');
                    
                    menuItems  = '<li ><b>'   headings   '</b>: <br/> ';
                        menuItems  = subheadings   ', ';
                        menuItems  =  dataFilter;
                    menuItems  = '</li>'

                    myArray  = entry.trait_type   ': '   entry.value;
                });
                
                $('#myList').html(menuItems);
                $('#dump').html(myArray);
                //console.log(myArray);
            });
        }
    };
    
    $.when(loopFunction()).done(function() {
        
        var secondaryFunction = function(secondary) { // the loop
            
            // alert("it's done, sort and display");
            
        }
        
        secondaryFunction();
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id ="myList">
 
</ul>