I have tried this but it doesn't work. I'm trying to make Dynamic Menu from jQuery json data. I have insert preview below.
I'm working on fully custom UI, so I plan not to use jQuery.UI.
var data = {
menu: [{
name: 'Women Cloth',
link: '0',
sub: null
},{
name: 'Men Cloth',
link: '1',
sub: [{
name: 'Arsenal',
link: '0-0',
sub: null
}, {
name: 'Liverpool',
link: '0-1',
sub: null
}, {
name: 'Manchester United',
link: '0-2',
sub: null
}]
}]};
var getMenuItem = function (itemData) {
var item = $("<li>", {
class: 'has-children',
id: itemData.id
}).append(
$("<a>", {
href: itemData.link,
html: itemData.name,
id: itemData.id + '-links',
}));
if (itemData.sub) {
var subMenuItem = $("<li>", {
class: 'has-icon'
}).append(
$("<a>", {
href: itemData.link,
class: 'submenu-title',
}));
var subList = $("<ul>", {
class: 'secondary-dropdown',
});
$.each(itemData.sub, function () {
subList.append(subMenuItem(this));
});
item.append(subList);
}
return item;
};
var $menu = $("#Menu");
$.each(data.menu, function () {
$menu.append(
getMenuItem(this)
);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="Menu"></ul>
Below is the output I needed.
<li class="has-children" id="ID">
<a id="ID-links" href="links">Women Clothing</a>
<ul class="cd-secondary-dropdown is-hidden">
<li class="go-back"><a>Back</a></li>
<li class="has-icon"><a class="submenu">submenu 1</a></li>
<li class="has-icon"><a class="submenu">submenu 2</a></li>
<li class="has-icon"><a class="submenu">submenu 3</a></li>
<li class="has-icon"><a class="submenu">submenu 4</a></li>
<li class="has-icon"><a class="submenu">submenu 5</a></li>
</ul>
</li>
<li class="has-children" id="ID">
<a id="ID-links" href="links">Men Clothing</a>
<ul class="cd-secondary-dropdown is-hidden">
<li class="go-back"><a>Back</a></li>
<li class="has-icon"><a class="submenu">submenu 1</a></li>
<li class="has-icon"><a class="submenu">submenu 2</a></li>
<li class="has-icon"><a class="submenu">submenu 3</a></li>
<li class="has-icon"><a class="submenu">submenu 4</a></li>
<li class="has-icon"><a class="submenu">submenu 5</a></li>
</ul>
</li>
You were not using $.each function as you were supposed. you are passing this as args to your function. this will undefined in the function getMenuItem
In you $.each function you need to have args as index and data. Index return the number of each key in you JSON & data is the one you need to pass to your function.
Also in your cd-secondary-dropdown you need to add ul only once and not in $.each.
I have fixed up your code and is exactly working as you wanted in your output above.
Run snippet below to see it working.
var data = {
menu: [{
name: 'Women Cloth',
link: '0',
sub: null
}, {
name: 'Men Cloth',
link: '1',
sub: [{
name: 'Arsenal',
link: '0-0',
sub: null
}, {
name: 'Liverpool',
link: '0-1',
sub: null
}, {
name: 'Manchester United',
link: '0-2',
sub: null
}]
}]
};
var getMenuItem = function(itemData) {
var item = $("<li>", {
class: 'has-children',
id: itemData.id
}).append(
$("<a>", {
href: itemData.link,
html: itemData.name,
id: itemData.id + '-links',
}));
if (itemData.sub) {
//Add UL once only
var subList = $("<ul>", {
class: 'secondary-dropdown',
});
//Append go back
var goBack = $("<li>", {}).append(
$("<a>", {
href: '',
html: 'Go back',
class: 'go-back',
}));
//Append go back
subList.append(goBack);
$.each(itemData.sub, function(index, data) {
//Sub menu
var subMenuItem = $("<li>", {
class: 'has-icon'
}).append(
$("<a>", {
href: data.link,
html: data.name,
class: 'submenu-title',
}));
subList.append(subMenuItem);
});
item.append(subList);
}
return item;
};
var $menu = $("#Menu");
$.each(data.menu, function(index, data) {
$menu.append(getMenuItem(data));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="Menu"></ul>
is this what you are trying to do? if yes, this is a way of doing it without jQuery
let data = {
menu: [{
name: 'Women Cloth',
link: '0',
sub: null
},{
name: 'Men Cloth',
link: '1',
sub: [{
name: 'Arsenal',
link: '0-0',
sub: null
}, {
name: 'Liverpool',
link: '0-1',
sub: null
}, {
name: 'Manchester United',
link: '0-2',
sub: null
}]
}]};
const MENU_COMPONENT = document.querySelector('#Menu');
for (const field in data.menu) {
const LI= document.createElement('li');
LI.setAttribute('class', 'has-children');
MENU_COMPONENT.appendChild(LI);
const LINK = document.createElement('a');
LINK.setAttribute('href', data.menu[field].link);
LINK.innerText = data.menu[field].name;
LI.appendChild(LINK);
const UL = document.createElement('ul');
UL.setAttribute('class', 'cd-secondary-dropdown is-hidden');
LI.appendChild(UL);
let SUBLEVEL_DATA = data.menu[field].sub;
for (const sub in SUBLEVEL_DATA) {
const SECOND_LEVEL_LI = document.createElement('li');
SECOND_LEVEL_LI.setAttribute('class', 'has-icon');
UL.appendChild(SECOND_LEVEL_LI);
const SECOND_LEVEL_LINK = document.createElement('a');
SECOND_LEVEL_LINK.setAttribute('href', SUBLEVEL_DATA[sub].link);
SECOND_LEVEL_LINK.className = 'submenu';
SECOND_LEVEL_LINK.innerText = SUBLEVEL_DATA[sub].name;
SECOND_LEVEL_LI.appendChild(SECOND_LEVEL_LINK);
}
}
<ul id="Menu"></ul>
Related
I have a Vue 3.0 app. In this app, I have the following:
export default {
data() {
return {
selected: null,
departments: [
{
name: 'Sports',
items: [
{ id:'1', label: 'Football', value:'football' },
{ id:'2', label: 'Basketball', value:'basketball' },
]
},
{
name: 'Automotive',
versions: [
{ id:'3', label: 'Oil', value:'oil' },
{ id:'4', label: 'Mud Flaps', value:'mud-flaps' },
]
}
]
};
}
};
I need to render these items in a dropdown list. Notably, the items need to be rendered by sections. In an attempt to do this, I'm using Bootstrap's dropdown headers. My challenge is, the HTML needs to be rendered in a way that I can't see how to do with Vue. I need to render my HTML like this:
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li><h6 class="dropdown-header">Sports</h6></li>
<li><a class="dropdown-item" href="#">Football</a></li>
<li><a class="dropdown-item" href="#">Basketball</a></li>
<li><h6 class="dropdown-header">Automotive</h6></li>
<li><a class="dropdown-item" href="#">Oil</a></li>
<li><a class="dropdown-item" href="#">Mud Flaps</a></li>
</ul>
Based on this need, I would have to have a nested for loop. In psuedocode, it would be like this:
foreach department in departments
<li><h6 class="dropdown-header">{{ department.name }}</h6></li>
foreach item in department.items
<li><a class="dropdown-item" href="#">{{ item.label }} </a></li>
end foreach
end foreach
I know I could do this with something like Razer. However, I don't see anyway to do this in Vue. Yet, I have to believe I'm overlooking something as rendering a hierarchy is a common need. How do you render a hierachy in Vue without changing the data structure?
Thank you.
just use nested v-for like this:
<template v-for="(department , i) in departments">
<li><h6 class="dropdown-header" :key="`head-${i}`">{{ department.name }}</h6></li>
<template v-for="(item , j) in department.items">
<li><a class="dropdown-item" href="#" :key="`sub-${i}${j}`">{{ item.label }} </a></li>
</template>
</template>
you can have nested v-for with the help of template and also make sure that the keys binding to the elements are unique (this has to be unique so you don't get weird behavior from vue).
run the code below and check the result (click on full screen to see the full list rendered):
// you can ignore this line
Vue.config.productionTip = false;
new Vue({
el: '#app',
data: {
departments: [{
name: 'Sports',
items: [{
id: '1',
label: 'Football',
value: 'football'
},
{
id: '2',
label: 'Basketball',
value: 'basketball'
},
]
},
{
name: 'Automotive',
items: [{
id: '3',
label: 'Oil',
value: 'oil'
},
{
id: '4',
label: 'Mud Flaps',
value: 'mud-flaps'
},
]
}
],
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<template v-for="({name, items}, i) in departments">
<li :key="`header-${i}`">
<h6 class="dropdown-header">{{ name }}</h6>
</li>
<li v-for="{label, id} in items" :key="`link-${id}`">
<a class="dropdown-item" href="#">{{ label }}</a>
</li>
</template>
</ul>
</div>
One approach to this is to use a computed method. I've created a jsfiddle here.
computed: {
departmentItems() {
const items = [];
this.departments.forEach(department => {
items.push({
label: department.name,
class: 'dropdown-header',
});
department.items.forEach(item => {
items.push({
label: item.label,
class: 'dropdown-item'
})
})
})
return items;
}
}
The important part here is, that we have a common model for both dropdown-header and dropdown-item.
You structure your data in a computed property, and then use v-for to iterate over the list. Here is an example:
new Vue({
el: "#app",
data() {
return {
selected: null,
departments: [
{
name: 'Sports',
items: [
{ id:'1', label: 'Football', value:'football' },
{ id:'2', label: 'Basketball', value:'basketball' },
]
},
{
name: 'Automotive',
items: [
{ id:'3', label: 'Oil', value:'oil' },
{ id:'4', label: 'Mud Flaps', value:'mud-flaps' },
]
}
]
}
},
computed: {
departmentsItem: function() {
return this.departments.reduce((acc,department) =>
[
...acc,
{ type: "department", name: department.name },
...department.items.map(item => ({ type: "item", name: item.label }))
]
, []);
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li v-for="(departmentItem,i) in departmentsItem" :key="i">
<h6
v-if="departmentItem.type==='department'" class="dropdown-header"
>{{departmentItem.name}}</h6>
<a
v-else-if="departmentItem.type==='item'" class="dropdown-item" href="#"
>{{departmentItem.name}}</a>
</li>
</ul>
</div>
I have a an array in js it's something like this
menu = [
{
name: 'Item1',
//submenuName: 'submenu-1',
},
{
name: 'Item2',
submenuName: 'submenu-2',
sub: [
{
name: 'Item2_1',
//submenuName: '',
},
{
name: 'Item2_2',
//submenuName: '',
},
{
name: 'Item2_3',
//submenuName: '',
}
]
},
{
name: 'Item3',
//submenuName: 'submenu-3',
}
]
And i need to list them in ul tag, but every level has to be closed before the other.
<ul data-menu="main">
<li data-submenu>Item1</li>
<li data-submenu='submenu-2'>Item2</li>
<li data-submenu>Item3</li>
</ul>
<ul data-menu="submenu-2">
<li data-submenu>Item2_1</li>
<li data-submenu>Item2_2</li>
<li data-submenu>Item2_3</li>
</ul>
and so on. I've mange to print them but only the first level. Cannot print the sub level.
If the menus need to be listed one after another and not nested, then maintain an array of menus to print and fill that array with submenus while printing parent menus.
Since you mentioned, that you're using jQuery, here is an example using this library.
function generateMenu (menu, container) {
var menus = [{name: 'main', entries: menu}];
while (menus.length) {
var current = menus.shift();
var ul = $("<ul />").attr('data-menu', current.name);
$.each(current.entries, function (index, menuItem) {
var li = $('<li />')
.attr('data-submenu', menuItem.submenuName || '')
.text(menuItem.name);
if ($.isArray(menuItem.sub)) {
menus.push({name: menuItem.submenuName, entries: menuItem.sub});
}
li.appendTo(ul);
});
ul.appendTo(container);
}
}
generateMenu(menu, $('body'));
JSFiddle example
I'am using this plugin: http://th3silverlining.com/2011/12/01/jquery-org-chart-a-plugin-for-visualising-data-in-a-tree-like-structure/
the question is how can I sort the <ul> items in the way I need it? are there some options or maybe some solutions out of the box?
Try this,
Demo
HTML
<div class="topbar">
<div class="topbar-inner">
<div class="container">
<a class="brand" href="#">jQuery Organisation Chart</a>
<ul class="nav">
<li>Github</li>
<li>Twitter</li>
<li>Blog</li>
</ul>
<div class="pull-right">
<div class="alert-message info" id="show-list">Show underlying list.</div>
<pre class="prettyprint lang-html" id="list-html" style="display:none"></pre>
</div>
</div>
</div>
</div>
<ul id="org" style="display:none">
<li>
Food
<ul>
<li id="beer">Beer</li>
<li>Vegetables
Click me
<ul>
<li>Pumpkin</li>
<li>
Aubergine
<p>A link and paragraph is all we need.</p>
</li>
</ul>
</li>
<li class="fruit">Fruit
<ul>
<li>Apple
<ul>
<li>Granny Smith</li>
</ul>
</li>
<li>Berries
<ul>
<li>Blueberry</li>
<li><img src="images/raspberry.jpg" alt="Raspberry"/></li>
<li>Cucumber</li>
</ul>
</li>
</ul>
</li>
<li>Bread</li>
<li class="collapsed">Chocolate
<ul>
<li>Topdeck</li>
<li>Reese's Cups</li>
</ul>
</li>
</ul>
</li>
</ul>
<div id="chart" class="orgChart"></div>
Jquery:
jQuery(document).ready(function() {
$("#org").jOrgChart({
chartElement : '#chart',
dragAndDrop : true
});
$("#show-list").click(function(e){
e.preventDefault();
$('#list-html').toggle('fast', function(){
if($(this).is(':visible')){
$('#show-list').text('Hide underlying list.');
$(".topbar").fadeTo('fast',0.9);
}else{
$('#show-list').text('Show underlying list.');
$(".topbar").fadeTo('fast',1);
}
});
});
$('#list-html').text($('#org').html());
$("#org").bind("DOMSubtreeModified", function() {
$('#list-html').text('');
$('#list-html').text($('#org').html());
prettyPrint();
});
});
////////////You can use this plugin also for json data
////////////Example
$(document).ready(function () {
var ds = [{ id: "2", parentid: "1", text: "India", children: [{ id: "5", parentid: "2", text: "MP", children: [{ id: "7", parentid: "5", text: "Indore", children: [{ id: "8", parentid: "7", text: "Tillore", children: [] }] }] }, { id: "6", parentid: "2", text: "UP", children: [] }] }, { id: "3", parentid: "1", text: "Rusia", children: [] }, { id: "4", parentid: "1", text: "China", children: [] }];
$("#mystring").CustomOrgChart({ dataSource: ds, hasTemplate: true, template: "<div style='color:red;' data-cardid='{0}'><span class='cardadd'>Add</span> <span class='cardedit'>edit</span> <span class='cardremove'>delete</span>{1}</div>",templatefields: ["id","text"] });
$("#custome").jOrgChart({
chartElement: '#string',
dragAndDrop: true
});
});
////////////Plugin
(function ($) {
jQuery.fn.CustomOrgChart = function (options) {
var defaults = {
dataSource: [],
dispalyText: "text",
children: "children",
hasTemplate: false,
template: "{0}",
templatefields: ["text"]
};
var settings = $.extend(true, {}, defaults, options);
if (settings.dataSource) {
var string = "<ul id='custome' style='display:none'>" + GetNodes(settings.dataSource) + "</ul>";
console.log(string);
(this).append(string);
return this;
}
function GetNodes(dataSource) {
var Node = "";
var dataSource = dataSource.slice(0);
var dataSourceArray = $.isArray(dataSource[0]) ? dataSource : [dataSource];
for (var i = 0; i < dataSourceArray.length; i++) {
for (var j = 0; j < dataSourceArray[i].length; j++) {
var text = dataSourceArray[i][j][settings.dispalyText];
var children = dataSourceArray[i][j][settings.children];
Node += "<li>";
var template = settings.template;
var templatefields = settings.templatefields;
if (settings.hasTemplate) {
for (var k = 0; k < templatefields.length; k++) {
template = template.replace("{" + k + "}", dataSourceArray[i][j][templatefields[k]]);
}
Node += template;
}
else {
for (var k = 0; k < templatefields.length; k++) {
template = template.replace("{" + k + "}", dataSourceArray[i][j][templatefields[k]]);
}
Node += template;
}
if (children.length > 0) {
Node += "<ul>" + GetNodes(children) + "</ul>";
}
Node += "</li>";
}
}
return Node;
}
};
})(jQuery);
I am trying to display descendant elements in array using "with" binding.
But it displays only last items in "exercises" and I want to see all of them. How is it possible to fix this?
And after that, how can I make each item in array editable?
My ViewModel:
function AppViewModel() {
var self = this;
self.workouts = ko.observableArray([
{name: "Workout1", exercises:{
name: "Exercise1.1",
name: "Exercise1.2",
name: "Exercise1.3"
}},
{name: "Workout2", exercises:{
name: "Exercise2.1",
name: "Exercise2.2",
name: "Exercise2.3"
}},
{name: "Workout3", exercises:{
name: "Exercise3.1",
name: "Exercise3.2",
name: "Exercise3.3"
}},
{name: "Workout4", exercises:{
name: "Exercise3.1",
name: "Exercise3.2",
name: "Exercise3.3"
}},
]);
self.removeWorkout = function() {
self.workouts.remove(this);
};
}
ko.applyBindings(new AppViewModel());
The View:
<div class="content">
<ul data-bind="foreach: workouts">
<li>
<span data-bind="text: name"> </span>
Remove
<ul data-bind="with: exercises">
<li data-bind="text: name"></li>
</ul>
</li>
</ul>
</div>
Here's this code at jsfiddle:
http://jsfiddle.net/9TrbE/
Thanks!
The exercises property you declared as an object should be an array.
self.workouts = ko.observableArray([
{name: "Workout1", exercises:[
{ name: "Exercise1.1" },
{ name: "Exercise1.2" },
{ name: "Exercise1.3" }
]},
]);
So you can use this view :
<div class="content">
<ul data-bind="foreach: workouts">
<li>
<span data-bind="text: name"> </span>
Remove
<ul data-bind="foreach: exercises">
<li data-bind="text: name"></li>
</ul>
</li>
</ul>
</div>
Declaring :
var exercises = {
name: "Exercise1.1",
name: "Exercise1.2",
name: "Exercise1.3"
};
Is like doing that :
var exercises = {
name: "Exercise1.1",
};
exercises.name: "Exercise1.2";
exercises.name: "Exercise1.3";
Get it with this
Here's this code at jsfiddle
self.workouts = ko.observableArray([
{name: "Workout1", exercises:[
{ name: "Exercise1.1" },
{ name: "Exercise1.2" },
{ name: "Exercise1.3" }
]},
]);
`http://jsfiddle.net/9TrbE/8/
I'm trying to chenge the css class of a li tag when I click on it.
I have this:
Model:
var businessUnitsModel = {
businessUnitsList: ko.observableArray([
{ siteID: "a", title: "business1" },
{ siteID: "b", title: "business2" },
{ siteID: "c", title: "business3" },
{ siteID: "d", title: "business4" }]),
currentSelected: ko.observable(),
selectItem: function (site) { this.currentSelected(site.siteID); }
}
//overall viewModel
var viewModel = {
businessUnits: businessUnitsModel,
};
HTML
<ul class="modal-list" data-bind="'foreach': businessUnits.businessUnitsList">
<li class="filterItem" data-bind="'text': title,
css: { 'filterItemSelect': siteID === $parent.currentSelected },
'click': $parent.selectItem">
</li>
</ul>
CSS
.filterItemSelect {
color:#0069ab;
}
and I can't understand why it is not working.
This is what you are looking for :
JS:
var businessUnitsModel = {
businessUnitsList: ko.observableArray([{
siteID: "a",
title: "business1"
}, {
siteID: "b",
title: "business2"
}, {
siteID: "c",
title: "business3"
}, {
siteID: "d",
title: "business4"
}]),
currentSelected: ko.observable(),
selectItem: function (that, site) {
that.currentSelected(site.siteID);
}
}
//overall viewModel
var viewModel = {
businessUnits: businessUnitsModel,
};
ko.applyBindings(viewModel);
View :
<div data-bind="with :businessUnits">
<ul class="modal-list" data-bind="'foreach': businessUnitsList">
<li class="filterItem" data-bind="'text': title,
css: { 'filterItemSelect': siteID === $parent.currentSelected() },
'click': function(){$parent.selectItem($parent, $data);}"></li>
</ul>
</div>
See fiddle
I hope it helps.
You should use currentSelected function value (i.e. add parentheses) when applying css:
<ul class="modal-list" data-bind="foreach: businessUnitsList">
<li class="filterItem" data-bind="text: title,
css: { 'filterItemSelect': siteID === $parent.currentSelected() },
click: $parent.selectItem">
</li>
</ul>
And script:
var businessUnitsModel = function() {
var self = this;
self.businessUnitsList = ko.observableArray([
{ siteID: "a", title: "business1" },
{ siteID: "b", title: "business2" },
{ siteID: "c", title: "business3" },
{ siteID: "d", title: "business4" }]);
self.currentSelected = ko.observable();
self.selectItem = function (site) {
self.currentSelected(site.siteID);
}
}
ko.applyBindings(new businessUnitsModel());
Fiddle
UPDATE here is update of your markup and view model. You should provide full path to currentSelected() property:
<ul class="modal-list" data-bind="'foreach': businessUnits.businessUnitsList">
<li class="filterItem" data-bind="'text': title,
css: { 'filterItemSelect':
siteID === $parent.businessUnits.currentSelected() },
'click': $parent.businessUnits.selectItem">
</li>
</ul>
And here is fixed problem with model - inside selectItem function this was equal to item which you clicked. Thus you don't want to use self alias to model, you need to specify its name:
var businessUnitsModel = {
businessUnitsList: ko.observableArray([
{ siteID: "a", title: "business1" },
{ siteID: "b", title: "business2" },
{ siteID: "c", title: "business3" },
{ siteID: "d", title: "business4" }]),
currentSelected: ko.observable(),
selectItem: function (site) {
businessUnitsModel.currentSelected(site.siteID);
}
}
//overall viewModel
var viewModel = {
businessUnits: businessUnitsModel,
};
ko.applyBindings(viewModel);
Fiddle