I have been working on a vanilla javascript project.
Here this line const tempPage = sublinks.find(({ page }) => page === text); is logging as undefined on the console.
const sublinks = [
{
page: 'products',
links: [
{ label: 'payment', icon: 'fas fa-credit-card', url: 'products.html' },
{ label: 'terminal', icon: 'fas fa-credit-card', url: 'products.html' },
{ label: 'connect', icon: 'fas fa-credit-card', url: 'products.html' },
],
},
{
page: 'developers',
links: [
{ label: 'plugins', icon: 'fas fa-book', url: 'products.html' },
{ label: 'libraries', icon: 'fas fa-book', url: 'products.html' },
{ label: 'plugins', icon: 'fas fa-book', url: 'products.html' },
{ label: 'billing', icon: 'fas fa-book', url: 'products.html' },
],
},
{
page: 'company',
links: [
{ label: 'about', icon: 'fas fa-briefcase', url: 'products.html' },
{ label: 'customers', icon: 'fas fa-briefcase', url: 'products.html' },
],
},
];
const submenu = document.querySelector('.submenu');
const linkBtns = [...document.querySelectorAll('.link-btn')];
linkBtns.forEach((btn) => {
btn.addEventListener('mouseover', e => {
const text = e.currentTarget.textContent;
const tempBtn = e.currentTarget.getBoundingClientRect();
const center = (tempBtn.left + tempBtn.right) / 2;
const bottom = tempBtn.bottom - 3;
// ***********this line**************************
const tempPage = sublinks.find(({ page }) => page === text);
// ******************************************************
console.log(tempPage);
submenu.classList.add('show');
submenu.style.left = `${center}px`;
submenu.style.top = `${bottom}px`;
})
});
here is the HTML code.
<ul class="nav-links">
<li>
<button class="link-btn">Products</button>
</li>
<li>
<button class="link-btn">Developers</button>
</li>
<li>
<button class="link-btn">Company</button>
</li>
</ul>
<aside class="submenu">
hello there
</aside>
In your HTML:
<button class="link-btn">Products</button>
So in your Javascript code:
const tempPage = sublinks.find(({ page }) => page === text)
"page" will be "products", and "text" will be "Products"
You can change it to
const tempPage = sublinks.find(({ page }) => page === text.toLowerCase())
You should transform the text to lowercase page === text.toLowerCase() since all the text nodes of the button are all capitalized resulting to return false on every iteration of your find() method
Related
I created the submenu in electron js and try to change the status of the submenu after it clicked. But I cannot perform the action.
index.js
ipcMain.on('show-context-menu', (event) => {
const template = [
{
label: 'Position',
submenu: [
{
label: 'Bottom Right',
type: 'checkbox',
role: 'bottomRight',
click: () => {
let modifiedMenuItem = changePosition(positioner, 'bottomRight', menuItem);
Menu.setApplicationMenu(Menu.buildFromTemplate(modifiedMenuItem));
//applyMenu(modifiedMenuItem);
menu = Menu.buildFromTemplate(modifiedMenuItem);
Menu.setApplicationMenu(menu);
menu.popup(BrowserWindow.fromWebContents(event.sender));
}
},
{
label: 'Bottom Left',
type: 'checkbox',
role: 'bottomLeft',
click: () => {
let modifiedMenuItem = changePosition(positioner, 'bottomLeft', menuItem);
Menu.setApplicationMenu(Menu.buildFromTemplate(modifiedMenuItem));
//applyMenu(modifiedMenuItem);
menu = Menu.buildFromTemplate(modifiedMenuItem);
Menu.setApplicationMenu(menu);
menu.popup(BrowserWindow.fromWebContents(event.sender));
}
}
]
}
]
menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);
menuItem = Menu.getApplicationMenu();
menu.popup(BrowserWindow.fromWebContents(event.sender));
});
let changePosition = (positioner, position, menuItem) => {
let menuTemplate = [{
label: 'Position',
submenu: []
}];
menuItem?.items[0]?.submenu?.items.forEach(m => {
menuTemplate[0].submenu.push({
label: m.label, type: m.type, role: m.role, click: m.click, checked: m.checked
});
});
positioner.move(position);
return menuTemplate;
}
Here after clicking, I am rendering the menu again. But it's not changing the checked status.
Any help on this.
How can I hide the navigation bar between roles ('Admin' & 'user') in React js
Example
const [currentUser, setCurrentUser] = useState("");
const [role, setRole] = useState("");
let navigation = [];
useEffect(async () => {
// get user from Local storage
const user = authService.getCurrentUser();
if (!user) return;
setCurrentUser(user);
// get Role from Database
currentUser && setRole(authService.getRoleByUserId(currentUser.id));
console.log(currentUser);
}, [currentUser.id]);
if (currentUser && role === "Admin") {
navigation = [
{ name: "Home", href: "/Home", action: false, icon: false },
{ name: "Vendors", href: "/vendors", action: false, icon: false },
{ name: "Pricing", href: "/pricing", action: false, icon: false },
{ name: "Profile", href: "/profile", action: false, icon: false },
{ name: "Sign Out", href: "/", action: false, icon: false },
{ name: "", href: "/Cart", action: false, icon: true },
];
} else {
navigation = [
{ name: "Home", href: "/Home", action: false, icon: false },
{ name: "Pricing", href: "/pricing", action: false, icon: false },
{ name: "Sign In", href: "/login", action: false, icon: false },
{ name: "", href: "/Cart", action: false, icon: true },
];
}
return (
...
How can i do something this? Suggestions are always appreciated.
You shouldn't go with currentUser in your useEffect but with user.
Try:
// get user from Local storage
const user = authService.getCurrentUser();
if (!user) return;
setCurrentUser(user);
// get Role from Database
user && setRole(authService.getRoleByUserId(currentUser.id));
How to append below condition to id = #sellerMetal <ul> container, it is a dynamic loop list.
if dataJS
productList > medals > goldmedal = true,
append <li class="icon"><img src="/img/goldmetal.png"></li>
if dataJS
productList.medals.silvermedal = true,
append <li class="icon"><img src="/img/silvermedal.png"></li>
if dataJS
productList > medals > newshop= true,
append <li class="icon"><img src="/img/newshop.png"></li>
...
...
...
...
...
This is a list of product.
Below is the Render List of Product List Append.
Expected result:
<div id="List">
<div class="feature_ico">
<ul id="#sellerMetal" class="icons">
(Apend to here)
</ul>
</div>
<div class="feature_ico">
<ul id="#sellerMetal" class="icons">
(Apend to here)
</ul>
</div>
<div class="feature_ico">
<ul id="#sellerMetal" class="icons">
(Apend to here)
</ul>
</div>
<div class="feature_ico">
<ul id="#sellerMetal" class="icons">
(Apend to here)
</ul>
</div>
</div>
Below is example snippet.
Below is the code that I have tried: comment //Condition is here I have tried is the condition I put it, it doesn't work like expected.
//Below is the Data JS
var data = { productList: [
{
id: "e0c18c12-0b51-41ad-9f2c-aefc20cafcdb",
link: "1",
imgurl: "img001",
text: 'Product 001',
seo: '',
medals: [{
goldmedal: true,
sellermedal: false,
newshop: true
}]
},
{
id: "f3bee385-76d7-4a87-8bba-a51d33238858",
link: "2",
imgurl: "img002",
text: 'Product 002',
seo: '',
medals: [{
goldmedal: true,
sellermedal: true,
newshop: true
}]
},
{
id: "fc3dd6a9-5d8c-4262-aa65-a680e0f0cafe",
link: "3",
imgurl: "img003",
text: 'Product 003',
seo: '',
medals: [{
goldmedal: false,
sellermedal: false,
newshop: true
}]
},
{
id: "8615711e-8544-4484-933f-b14a93941b86",
link: "4",
imgurl: "img004",
text: 'Product 004',
seo: '',
medals: [{
goldmedal: false,
sellermedal: false,
newshop: true
}]
}]
};
$(function () {
const getProductList = function (productItem) {
const productListRender = $('<div>', { class: 'feature_ico'}).append($('<ul>', {
id: plSettings.sellerMetal,
class: 'icons'
}));
//Condition is here i have tried
if (productItem.medals) {
$.each(productItem.medals, function (index, data) {
if (this.goldmedal === true) {
const medalRender = $(plSettings.sellerMetal);
const metalItem = $('<li>', {
class: 'icon gold'
}).append($('img'), {
src: ''
});
medalRender.append(metalItem);
} else if (this.silvermedal === true) {
const medalRender = $(plSettings.sellerMetal);
const metalItem = $('<li>', {
class: 'icon gold'
}).append($('img'), {
src: ''
});
medalRender.append(metalItem);
}
});
}
return productListRender;
};
const $product = $('#List')
$.each(data.productList, function (index, data) {
$product.append(getProductList(data));
});
});
//Below is the Setting JS
var plSettings = $.extend({
sellerMetal: '#' + 'sellerMetal',
goldMetalSrc: '/img/tps/gold.png'
});
.feature_ico {
border: 1px solid #e0e0e0
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="List"></div>
like this?
//Below is the Setting JS
var plSettings = $.extend({
goldmedal: '/img/tps/gold.png',
sellermedal: '/img/tps/seller.png',
newshop: '/img/tps/newshop.png'
});
//Below is the Data JS
var data = { productList: [
{
id: "e0c18c12-0b51-41ad-9f2c-aefc20cafcdb",
link: "1",
imgurl: "img001",
text: 'Product 001',
seo: '',
medals: {
goldmedal: true,
sellermedal: false,
newshop: true
}
},
{
id: "f3bee385-76d7-4a87-8bba-a51d33238858",
link: "2",
imgurl: "img002",
text: 'Product 002',
seo: '',
medals: {
goldmedal: true,
sellermedal: true,
newshop: true
}
},
{
id: "fc3dd6a9-5d8c-4262-aa65-a680e0f0cafe",
link: "3",
imgurl: "img003",
text: 'Product 003',
seo: '',
medals: {
goldmedal: false,
sellermedal: false,
newshop: true
}
},
{
id: "8615711e-8544-4484-933f-b14a93941b86",
link: "4",
imgurl: "img004",
text: 'Product 004',
seo: '',
medals: {
goldmedal: false,
sellermedal: false,
newshop: true
}
}]
};
function createFeatureIco() {
var el = document.createElement('div');
el.classList.add('feature_ico');
var ul = document.createElement('ul');
ul.id = '#sellerMetal' // # ?
ul.classList.add('icons');
el.append(ul);
return [el, ul]
}
function createMedal(src) {
var li = document.createElement('li');
var img = document.createElement('img');
img.src = src
li.append(img);
return li
}
$(function () {
const list = document.getElementById('List');
data.productList.forEach(({ medals }) => {
const [el, ul] = createFeatureIco();
const { goldmedal, sellermedal, newshop } = medals;
if(medals) {
// conditions
if(goldmedal) { ul.append(createMedal(plSettings.goldmedal))}
if(sellermedal) { ul.append(createMedal(plSettings.sellermedal))}
if(newshop) { ul.append(createMedal(plSettings.newshop))}
}
list.append(el);
})
});
.feature_ico {
border: 1px solid #e0e0e0
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="List"></div>
If you want to append all of true condition badges, replace else if to if. I remained the console log to check condition is right.
//Below is the Data JS
var data = {
productList: [
{
id: "e0c18c12-0b51-41ad-9f2c-aefc20cafcdb",
link: "1",
imgurl: "img001",
text: 'Product 001',
seo: '',
medals: [{
goldmedal: true,
sellermedal: false,
newshop: true
}]
},
{
id: "f3bee385-76d7-4a87-8bba-a51d33238858",
link: "2",
imgurl: "img002",
text: 'Product 002',
seo: '',
medals: [{
goldmedal: true,
sellermedal: true,
newshop: true
}]
},
{
id: "fc3dd6a9-5d8c-4262-aa65-a680e0f0cafe",
link: "3",
imgurl: "img003",
text: 'Product 003',
seo: '',
medals: [{
goldmedal: false,
sellermedal: false,
newshop: true
}]
},
{
id: "8615711e-8544-4484-933f-b14a93941b86",
link: "4",
imgurl: "img004",
text: 'Product 004',
seo: '',
medals: [{
goldmedal: false,
sellermedal: false,
newshop: true
}]
}]
};
$(function () {
const getProductList = function (productItem) {
const productListRender = $('<div>', { class: 'feature_ico' }).append($('<ul>', {
id: plSettings.sellerMetal,
class: 'icons'
}));
//Condition is here i have tried
if (productItem.medals) {
$.each(productItem.medals, function (index, data) {
if (this.goldmedal === true) {
console.log('goldmedal', this.goldmedal)
const medalRender = $(plSettings.sellerMetal);
const metalItem = $('<li>', {
class: 'icon gold'
}).append($('img'), {
src: ''
});
medalRender.append(metalItem);
}
if (this.silvermedal === true) {
console.log('silvermedal', this.silvermedal)
const medalRender = $(plSettings.sellerMetal);
const metalItem = $('<li>', {
class: 'icon gold'
}).append($('img'), {
src: ''
});
medalRender.append(metalItem);
}
if (this.newshop === true) {
console.log('newshop', this.newshop) // condition
const medalRender = $(plSettings.sellerMetal);
const metalItem = $('<li>', {
class: 'icon gold'
}).append($('img'), {
src: ''
});
medalRender.append(metalItem);
}
});
}
return productListRender;
};
const $product = $('#List')
$.each(data.productList, function (index, data) {
$product.append(getProductList(data));
});
});
//Below is the Setting JS
var plSettings = $.extend({
sellerMetal: '#' + 'sellerMetal',
goldMetalSrc: '/img/tps/gold.png'
});
.feature_ico {
border: 1px solid #e0e0e0
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="List"></div>
I want to show product dynamic base on browser link. For example if
http://www.example.com?product=[data.productList.id] then show data.productList.text
Expected results: if http://www.example.com?product=62276197-6059-4c21-9b40-c5b1d277e85d then show Product 001.
I have tried many method.
My js is below :
const browserId = data.productList.id
if (window.location.href.contains('?product=' + browserId) > -1) {
$('.test').append(productItemName(data.productList.id))
}
function productItemName(productName) {
return data.productList.filter(product => product.id === productName)?.[0]?.id;
}
my data js is below:
var data = {
productList: [
{
id: "62276197-6059-4c21-9b40-c5b1d277e85d",
link: "javascript:void(0)",
imgurl: "/img/upload/png/joyacart_000001_12032019.png",
text: 'Product 001',
price: '368.00',
hitRate: '45472',
goldMedal: false,
newItem: true,
newShop: true,
freeDelivery: true,
ShopId: '5cfb048c-86e8-4d2d-85bf-e4e9e1effdcb'
},
{
id: "4a074028-d72a-4954-a159-f41adeb5cc5b",
link: "javascript:void(0)",
imgurl: "/img/upload/png/joyacart_000002_12032019.png",
text: 'Product 002',
price: '99.00',
hitRate: '25241',
goldMedal: true,
newItem: false,
newShop: true,
freeDelivery: true,
ShopId: '10eb4250-47d6-41ad-a429-f65e05836f26'
}]
}
html is below:
<div class="test"></div>
You can get value which is under product using searchParams.get("product"); and then pass same to your function to get required text.
Demo Code :
//your json data
var data = {
productList: [{
id: "62276197-6059-4c21-9b40-c5b1d277e85d",
link: "javascript:void(0)",
imgurl: "/img/upload/png/joyacart_000001_12032019.png",
text: 'Product 001',
price: '368.00',
hitRate: '45472',
goldMedal: false,
newItem: true,
newShop: true,
freeDelivery: true,
ShopId: '5cfb048c-86e8-4d2d-85bf-e4e9e1effdcb'
},
{
id: "4a074028-d72a-4954-a159-f41adeb5cc5b",
link: "javascript:void(0)",
imgurl: "/img/upload/png/joyacart_000002_12032019.png",
text: 'Product 002',
price: '99.00',
hitRate: '25241',
goldMedal: true,
newItem: false,
newShop: true,
freeDelivery: true,
ShopId: '10eb4250-47d6-41ad-a429-f65e05836f26'
}
]
}
//your url
var url_string = "http://www.example.com?product=62276197-6059-4c21-9b40-c5b1d277e85d";
var url = new URL(url_string);
//get product parameter value
var browserId = url.searchParams.get("product");
//checking if id is not null
if (browserId != null) {
//pass id
$('.test').append(productItemName(browserId))
}
function productItemName(productName) {
return data.productList.filter(product => product.id === productName)?.[0]?.text;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test"></div>
at my webconsole productItemName function errors me with bad syntax (meaning this ?.[0]?.text)
try this
function productItemName(productName) {
let result = data.productList.find((item) => item.id === productName);
return result !== undefined ? result.text : "Not Found";
}
i wanna product new menu i try Recursive dictionary array
but still not get correct datas.
below its two array , globalRoutes its dict array , menuRoutes its normal array i wanna use
menuRoutes to search globalRoutes
below its my code:
const globalRoutes = [
{
path: '/user',
meta: {
title: 'UserManager',
icon: 'el-icon-user'
},
children: [{
path: 'userinfo',
meta: {
title: 'UserInfo',
}
},
{
path: 'roleinfo',
meta: {
title: 'Roleinfo'
}
},
{
path: 'rolemenu',
meta: {
title: 'roleMenu'
}
}
]
},
{
path: '/test',
meta: {
title: 'TestMenu',
icon: 'el-icon-setting'
}
}
]
const menuRoutes = ['userinfo', '/test']
function Test1(routes) {
res = []
for(let route of routes){
console.log(route.path)
const data = {}
let menuIndex = menuRoutes.indexOf(route.path)
if(menuIndex > -1){
data.path = route.path
data.meta = route.meta
}else{
if(route.children){
data.path = route.path
data.meta = route.meta
data.children = Test1(route.children)
}
}
if (Object.keys(data).length > 0){
res.push(data)
}
}
return res
}
console.log(Test1(globalRoutes))
Error datas as below:
[
{ path: 'userinfo', meta: { title: 'UserInfo' } },
{
path: '/user',
meta: { title: 'UserManager', icon: 'el-icon-user' },
children: [Circular]
},
{
path: '/test',
meta: { title: 'TestMenu', icon: 'el-icon-setting' }
}
]
I wanted correct data as below:
[
{
path: '/user',
meta: { title: 'UserManager', icon: 'el-icon-user' },
children: [{ path: 'userinfo', meta: { title: 'UserInfo' } }]
},
{
path: '/test',
meta: { title: 'TestMenu', icon: 'el-icon-setting' }
}
]
how need i change code to get correct datas?
Here is simple example based on your code.
const globalRoutes = [
{
path: '/user',
meta: {
title: 'UserManager',
icon: 'el-icon-user'
},
children: [{
path: 'userinfo',
meta: {
title: 'UserInfo',
}
},
{
path: 'roleinfo',
meta: {
title: 'Roleinfo'
}
},
{
path: 'rolemenu',
meta: {
title: 'roleMenu'
}
}
]
},
{
path: '/test',
meta: {
title: 'TestMenu',
icon: 'el-icon-setting'
}
}
];
const menuRoutes = ['userinfo', '/test'];
const inRoutes = (search, routes) => {
let result = [];
routes.forEach((item, index) => {
if (search.includes(item.path)) {
result.push(item);
}
if (item.children) {
item.children.forEach((itm, idx) => {
if (search.includes(itm.path)) {
item.children = item.children.filter(i => i === itm); // or item.children = [itm];
result.push(item);
}
});
}
});
return result;
};
console.log(inRoutes(menuRoutes, globalRoutes));
Hope this helps.