Develop Reference

Dynamic Menu from multiple JSON files [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 months ago.
Improve this question
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>

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>

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>

How can I create Nested Treeview in Mvc5 View with Ajax and JS approach

I have a simple MVC view which the department name. There is a hierarchy on the department which I use in the nested Treeview node.
My current approach shows the TREEVIEW but only stops by 1 nested.
I want to display all the existing department hierarchy in the Treeview. Something like the figure below:
> Galaxy Department
|
|___> Moon Department
|
|____> Starts Department
|
|___> Cloud department
|
|___> And so on....
My mvc View:
<div class="col-md-3" style="border:1px solid black; height:725px; background-color:#FAFAFA">
<span style="font-weight:500;">Triple4</span>
#{
<div class="treeview">
#{
if (Model != null && Model.Count() > 0)
{
<ul>
#foreach (var i in Model)
{
<li>
<span class="collapse collapsible" data-loaded="false" pid="#i.DepartId"> </span>
<span>
#i.DepatName
</span>
</li>
}
</ul>
}
}
</div>
}
</div>
My Ajax :
$(".collapsible").on("click", function (e) {
e.preventDefault();
var this1 = $(this); // Get Click item
var data = {
pid: $(this).attr('pid')
};
var isLoaded = $(this1).attr('data-loaded'); // Check data already loaded or not
if (isLoaded == "false") {
$(this1).addClass("loadingP"); // Show loading panel
$(this1).removeClass("collapse");
// Now Load Data Part1
$.ajax({
url: "/Department/GetTreeViewList/",
type: "GET",
data: data,
dataType: "json",
success: function (d) {
$(this1).removeClass("loadingP");
if (d.length > 0) {
var $ul = $("<ul></ul>");
//var result;
$.each(d, function (i, ele) {
$ul.append(
$("<li></li>").append(
"<span class='collapse collapsible' data-loaded='false' pid='" + ele.DepartId + "'> </span>" +
"<span><a href='" + ele.NavUrl + "' id='directavail' >" + ele.DepatName + "</a></span>"
)
)
});
//$("[data-role=collapsible]").trigger("collapse");
$(this1).parent().append($ul);
$(this1).addClass('collapse');
$(this1).toggleClass('collapse expand');
$(this1).closest('li').children('ul').slideDown();
}
else {
// no sub menu
$(this1).css({ 'dispaly': 'inline-block', 'width': '15px' });
}
$(this1).attr('data-loaded', true);
},
error: function () {
alert("Error!");
}
});
}
else {
// if already data loaded
$(this1).toggleClass("collapse expand");
$(this1).closest('li').children('ul').slideToggle();
}
});
Any Subjection is very welcome.

I have found a very good approach from #Sourav Mondal
TreeView on Demand
Very quick and Accurate approach which I had to some changes on a JS script since it's old.
And the link it's just a tutorial and guideline.
Hopefully, it's helping someone too.

dynamically add list item to ul using jquery

I have the following html structure:
<div id="gw-sidebar" class="gw-sidebar">
<div class="nano-content">
<ul class="gw-nav gw-nav-list">
<li class="init-un-active"> <span class="gw-menu-text">Scenarios</span> </li>
//===>Need to add the new list using Jquery here
</ul>
</div>
</div>
I want to add a list as shown below using jquery to the class 'init-un-active' shown above:
<li class="init-arrow-down"> <span class="gw-menu-text">Scenario-1</span> <b class="gw-arrow"></b>
<ul class="gw-submenu">
<li> Scenario </li>
<li> Resolutions </li>
<li> Triggers </li>
</ul>
</li>
How do i use jquery to add this code dynamically to the aforementioned class?
I have tried the following but it wont work:
<script type="text/javascript">
function loadScenarioForm () {
SideMenu.createBaseEntry();
// ScenarioForm.create();
}
var SideMenu = {
container : null,
scenarioCount : 0,
scenarioTxt : "Scenario",
ResolutionsTxt : "Resolutions",
TriggersTxt : "Triggers",
menuLink : "javascript:void(0)",
subMenuLink1 : "javascript:void(0)",
subMenuLink2 : "javascript:void(0)",
subMenuLink3 :"javascript:void(0)",
createBaseEntry : function createDefault () {
this.container = $(document.createElement('div'));
this.container.addClass('gw-sidebar');
var html = "";
html += '<div id="gw-sidebar" class="gw-sidebar">';
html += '<div class="nano-content">';
html += '<ul class="gw-nav gw-nav-list">';
html += '<li class="init-un-active"> <span class="gw-menu-text">Scenarios</span> </li>';
html += '</ul></div></div></div>';
this.container.append(html);
$('body').append(this.container);
this.scenarioCount++;
this.container.append(this.createEntry(scenarioCount));
},
createEntry : function createDefault (index) {
var list = $('ul.mylist');
var li = $('<li/>')
.addClass('ui-menu-item')
.attr('role', 'menuitem')
.appendTo(list);
return list;
},
</script>
Please advise,
Thanks!

You can make your <li> as a template and append it to the <ul> using jquery. You can try something like this Fiddle:
$(document).ready(function(){
$('a').click(function() {
var template = $('#hidden-template').html();
$('.gw-nav').append(template);
});
});

if ($(".init-un-active").length == 0) {
$.ajax({
url: 'URL From where you want to load ...',
type: 'POST',
data: { id: ID}, // pass your data here if any .. else keep empty
success: function (data) {
$(".init-un-active").css({ "display": "block", "z-index": "999999999999" });
$(".init-un-active").html(data);
},
error: function () {
alert('Unable to load menu...');
}
});
}
else {
if ($(".init-un-active ul").length > 0) {
$(".init-un-active ul").css("display", "none");
$(".init-un-active").css("display", "block");
}
}
Explanation:
if ($(".init-un-active").length == 0)
This condition is used to check if there are already item loaded in li .. if yes then no need to call ajax.. just hide show that menu..
$(".init-un-active").css({ "display": "block", "z-index": "999999999999" });
this css is applied to show menu infront and hide all content beside this menu..

this.container.append(html);
$('body').append(this.container);
instead of this try this
$(".init-un-active").html(html);

Print JSON data in HTML structure issue

I have a JSON witch looks something like this
{
"English": "en",
"Francais": "fr",
"German": "gm"
}
Now I need to print this data in HTML structure witch looks like this
<ul id="links">
<li class="home">
</li>
<li class="languages">
EN ------ > FIRST LANGUAGE FROM JSON
<ul class="available"> ----> OTHERS
<li>DE</li>
<li>IT</li>
<li>FR</li>
</ul>
</li>
</ul>
In javascript I know how to get data and print all data in the same structure but how to do it in structure shown in example ?
in Javascript I'm getting data with
$.getJSON('js/languages.json', function(data) {
console.log(data);
/* $.each(data, function(key, val) {
console.log(val);
});*/
});

Use jQuery template to bind the Html. Some Sample

Something like that:
var getBlock = function(skipLang) {
var str = '\
<ul id="links">\
<li class="home">\
\
</li>\
<li class="languages">\
' + data[skipLang] + '\
<ul class="available">\
';
for(var lang in data) {
if(lang != skipLang) {
str += '<li>' + lang + '</li>';
}
}
str += '</ul></li></ul>';
return str;
}
var html = '';
for(var lang in data) {
html += getBlock(lang);
}

Although using templating engine is an option for simpler code, for this case you can directly run a for loop and assign HTML within javascript code easily.
HTML part is going to be something like this
<ul id="links">
<li class="home">
home
</li>
<li class="languages">
<ul class="available">
</ul>
</li>
</ul>
And JS part is like this:
var data = {
"English": "en",
"Francais": "fr",
"German": "gm"
};
var $liLanguages = $('li.languages');
var $ulAvailable = $('ul.available');
var selectedLanguage = '';
for(var index in data) {
if(selectedLanguage == '') {
selectedLanguage = data[index];
$liLanguages.prepend("<a href='#'>" + data[index].toUpperCase() + "</a>");
}
else {
$ulAvailable.append("<li><a href='#'>" + data[index].toUpperCase() + "</a></li>");
}
}
Here is the jsfiddle related.
Hope this helps.

Here is a bit that will get you two new objects, one for the first object property/value and another for the remaining. Still not clear what is done with it once you have it, but let me know if it helps:
// This can be replaced with existing data or updated to var langs = data;
var langs = {"English": "en", "Francais": "fr","German": "gm" };
// jQuery map only works on objects after 1.6, heads up
var lang_keys = $.map( langs, function( value, key ) {
return key;
});
// Now that you have an array of the keys, you can use plain-ol shift()
var primary_lang_key = lang_keys.shift();
// create and populate an object just for your first language:
var primary_lang = {};
primary_lang[primary_lang_key] = langs[primary_lang_key];
// Thanks to shift, we know that populating this object with lang_keys will
// only have remaining items:
var other_langs = {};
$.map( lang_keys, function( lang_key ) {
other_langs[lang_key] = langs[lang_key];
});
console.log(other_langs);

Select sub element based on classes it has

Below is the HTML that I have
<ul id="QBS">
<li>
<a class="qb_mode starting Rodgers" href="#">See Stats</a>
</li>
<li>
<a class="qb_mode Manning" href="#">See Stats</a>
</li>
<li>
<a class="qb_mode Brady" href="#">See Stats</a>
</li>
</ul>
I want to find this unordered list, then tell which item has the starting qb class and then return the class that has their name (brady rodger manning) etc.
What's throwing me in a loop is the fact that the link is wrapped in the list element.
Here is what I am trying:
element = $("#qbs"); // pretty sure I want this vs getElementbyDocumentID
children = element.children();` // gets me all the list elements
for (i=0;i<children.length;i++) {
grandchild = children[i].children();
???? How would I get the 3rd class on this element?
}
Sorry about the formatting.

How about this?
var allClasses = $("#QBS").find('li a[class^="qb_"]')
.map(function () {
return this.className.split(" ").pop();
}).get();
console.log(allClasses);
Fiddle
Provided the class started with qb_* is at the beginning and you want to take only the last class of the match.
if all your class names are qb_mode then:
var allClasses = $("#QBS").find('.qb_mode').map(function () {
return this.className.split(" ").pop();
}).get();
if you want all of them then:
var allClasses = $("#QBS").find('.qb_mode').map(function () {
var cls = this.className.replace(/qb_mode/,'');
return cls.trim().split(/\W+/);
}).get();
console.log(allClasses);
Fiddle

If I understood you correctly, how about:
var name = $('#QBS a.qb_mode.starting').prop('class').replace(/\s*(qb_mode|starting)\s*/g,'');
console.log(name); // Rogers
See demo here.

a=document.getElementById('QBS');
var b=a.getElementsByClassName("qb_mode");
var i, j=b.length, result=[];
for(i=0;i<j;i++) {
c=b[i].className.split(" ");
result.push(c.pop());
}
return result;

fiddle http://jsfiddle.net/3Amt3/
var names=[];
$("#QBS > li a").each(function(i){
var a=$(this).attr("class").split(" ");
names[i]=a[(a.length-1)];
console.log("Name is " + names[i]);
});
or a more precise selector
$("#QBS > li a.qb_mode").each( ....