skip to Main Content

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


  1. Chosen as BEST ANSWER

    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:

    $(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 getItemData = async function(id) {
            
            const itemURI = "https://ikzttp.mypinata.cloud/ipfs/QmQFkLSQysj94s5GvTHPyzTxrawwtjgiiYS2TBLgrvw8CW/"
            return await $.getJSON(itemURI+id);
        }
        
        var loopFunction = async function(dataIsLoading) {
                        
            var items = {};
            var promises = [];
            
            for (let i = 0; i < 1000; i++) {
                    
                // Get data and add to promises array:
                promises.push(getItemData(i));
            }
            
            // Wait on all promises:
            return await Promise.all(promises).then(function(promise) {
                
                // Loop over each returned promise:
                $.each(promise, function(index, data) {
                    
                    // Loop over attribute data:
                    $.each(data.attributes, function(index, entry) {
                        
                        let menuParent = entry.trait_type;
                        let menuChild = entry.value;
                        let menuParentItem = {};
                        
                        // Check for menuParent:
                        if (items.hasOwnProperty(menuParent)) {
                            
                            // Get menuParent:
                            menuParentItem = items[menuParent];
                        }
                        
                        // Check for menuChild:
                        if (!menuParentItem.hasOwnProperty(menuChild)) {
                            
                            // Add menuChild:
                            menuParentItem[menuChild] = menuChild;
                        }
                        
                        // Update items object:
                        items[menuParent] = menuParentItem;
                    });
                });
                
                // Return items.
                return items;
            });
        };
        
        $.when(loopFunction()).done(function(items) {
            
            // Loop over all items creating the markup.
            var menuItems = '';
            
            $.each(items, function(menuParent, menuChildren) {
                
                menuItems += '<li class="menuParent"><b>' + menuParent + '</b>: <ul>';
                
                // Loop over menuChildren.
                $.each(menuChildren, function(menuChild, menuChildValue) {
                    
                    menuItems += '<li class="menuChild">' + menuChild + '</li>';
                });
                
                menuItems += '</ul></li>';
            });
            
            // Render menu items.
            $('#myList').append(menuItems);
        });
    });
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <ul id ="myList">
     
    </ul>
    

  2. 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 class="category"><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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search