Develop Reference

find() method is not working in my vanilla javascript project

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

how to read another javascript JSON categories

I have no idea how to make this,
I have a loop for product List Item, but i really don't know how to link the shop item to shop name. I have tried many method but i really don't know how to link the item to the shop.
if productList.ShopId = shopList.id then use this shopList.title
SHOP NAME = shopList.title
const getProductList = function (productItem) {
const productListRender =
$('<div>').append($('<span>', {
html: shopName() <<<< SHOP NAME
}));
$.each(data.shopList), function shopName() {
this.text(shopList.title);
};
return productListRender;
}
const $product = $('#List')
$.each(data.productList, function (index, data) {
$product.append(getProductList(data));
});
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',
goldMedal: false,
newItem: true,
newShop: true,
freeDelivery: true,
ShopId: '5cfb048c-86e8-4d2d-85bf-e4e9e1effdcb'
},
{
id: "59de8216-052d-4e51-9f7d-7e96642ded62",
link: "javascript:void(0)",
imgurl: "/img/upload/png/joyacart_000002_12032019.png",
text: 'Product 002',
goldMedal: true,
newItem: false,
newShop: true,
freeDelivery: true,
ShopId: '10eb4250-47d6-41ad-a429-f65e05836f26'
},
{
id: "59de8216-052d-4e51-9f7d-7e96642ded62",
link: "javascript:void(0)",
imgurl: "/img/upload/png/joyacart_000003_12032019.png",
text: 'Product 003',
goldMedal: true,
newItem: false,
newShop: true,
freeDelivery: true,
ShopId: '10eb4250-47d6-41ad-a429-f65e05836f26'
}],
shopList: [{
id: '5cfb048c-86e8-4d2d-85bf-e4e9e1effdcb',
title: 'Shop 001'
},
{
id: '10eb4250-47d6-41ad-a429-f65e05836f26',
title: 'Test Shop'
}]
}

Refine shopName as:
function shopName(shopId) {
// find the right shop by comparing shopId with each `shop.id`
// uses optional chaining to prevent errors
// returns undefineds if no match is found
return shopList.filter(shop => shop.id === shopId)?.[0]?.title;
}
const shopList = [{
id: '5cfb048c-86e8-4d2d-85bf-e4e9e1effdcb',
title: 'Shop 001'
},
{
id: '10eb4250-47d6-41ad-a429-f65e05836f26',
title: 'Test Shop'
}]
console.log(shopName('10eb4250-47d6-41ad-a429-f65e05836f26'));
console.log(shopName('222'));

everything seems to be in order in your data. only thing that i can see is that there was some mishap in your comparison method.
have you tried comparing them not with equal sign but rather treat them as string .
you could see this link for reference..
https://www.tutorialspoint.com/What-is-the-best-way-to-compare-two-strings-in-JavaScript

show product base on browser url

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";
}

Looking for a more concise approach to manipulate an array with nested data

I'm currently working on an Angular application and want to iterate over an array of objects that have nested data. I want to mutate the existing array when a user clicks a checkbox changing the checked property from false to true and vise Versa. For simplicity sake, I'm only posting the array structure.
I tried
const checklistCashe = [
{
categories: [
{
title: "Administrators",
items: [
{subTitle: "Admin", checked: false},
{subTitle: "Associates", checked: false},
{subTitle: "Hr", checked: false},
]
},
{
title: "Associates",
items: [
{subTitle: "Admin", checked: false},
{subTitle: "Associates", checked: false},
{subTitle: "Hr", checked: false},
{subTitle: "Users", checked: false},
]
},
{
title: "Organization",
items: [
{subTitle: "Contract", checked: false},
{subTitle: "External", checked: false},
{subTitle: "Internal", checked: false},
]
},
{
title: "Products",
items: [
{subTitle: "Concept", checked: false},
{subTitle: "Demo", checked: false},
{subTitle: "Production", checked: false},
]
},
{
title: "Reporting",
items: [
{subTitle: "Admin", checked: false},
{subTitle: "Associates", checked: false},
{subTitle: "Hr", checked: false},
]
}
]
}
]
const category = "Reporting";
const subCategory = "Admin";
I want to mutate the current array based on the category and subCategory provided. So I only want the checked property to change if the title is Reporting and the subTitle is Admin.
{
title: "Reporting",
items: [
{subTitle: "Admin", checked: true},
{subTitle: "Associates", checked: false},
{subTitle: "Hr", checked: false},
]
}

The best way with what you have would be something like:
function toggleChecked(title, subtitle) {
checklistCashe[0].categories.forEach((category) => {
if (category.title === title) {
category.items.forEach((item) => {
if (item.subTitle === subtitle) {
item.checked = !item.checked;
}
});
}
});
}
However, I feel like you might be better off formatting your checklistCashe to something more like:
const checklistCashe = {
Administrators: {
Admin: false,
Associates: false,
Hr: false
}
[...]
}
Then you can do something more like:
function toggleChecked(title, subtitle) {
checklistCashe[title][subtitle] = !checklistCashe[title][subtitle]
}
and you wouldn't have to iterate.

If you wanna keep it clean then use lodash as shown below
const checkListCache = [
{
categories: [
{
title: 'Administrators',
items: [
{ subTitle: 'Admin', checked: false },
{ subTitle: 'Associates', checked: false },
{ subTitle: 'Hr', checked: false },
],
},
{
title: 'Associates',
items: [
{ subTitle: 'Admin', checked: false },
{ subTitle: 'Associates', checked: false },
{ subTitle: 'Hr', checked: false },
{ subTitle: 'Users', checked: false },
],
},
{
title: 'Organization',
items: [
{ subTitle: 'Contract', checked: false },
{ subTitle: 'External', checked: false },
{ subTitle: 'Internal', checked: false },
],
},
{
title: 'Products',
items: [
{ subTitle: 'Concept', checked: false },
{ subTitle: 'Demo', checked: false },
{ subTitle: 'Production', checked: false },
],
},
{
title: 'Reporting',
items: [
{ subTitle: 'Admin', checked: false },
{ subTitle: 'Associates', checked: false },
{ subTitle: 'Hr', checked: false },
],
},
],
},
];
const category = 'Reporting';
const subCategory = 'Admin';
const { categories } = checkListCache[0];
const selectedCategory = _.find(categories, ['title', category]);
const selectedSubCategory = _.find(selectedCategory.items, ['subTitle', subCategory]);
selectedSubCategory.checked = !selectedSubCategory.checked;
console.log(checkListCache);
You can add safety checks as well before each loop to ensure we have values before manipulating it.

Use nested map calls:
function mutate (arr)
{
return arr.map(innerArr =>
{
return {
title: innerArr.title,
items: innerArr.items.map(item => {
return {
subTitle: item.subTitle,
checked: (innerArr.title === "Reporting" && item.subTitle === "Admin") ? false : item.checked,
};
}),
};
});
}

Checkbox in tinymce popup window

I would like to create checkbox in popup window using tinymce. I can create listbox in popup window but cannot create checkbox in it.
var tempGroups = ['Group1', 'Group2', 'Group3', 'Group4'];
var temp = [{
group: 'Group1',
title: 'Title1',
content: '<p>Content1</p>',
}, {
group: 'Group1',
title: 'Title1-1',
content: '<p>Content11</p>',
}, {
group: 'Group2',
title: 'Title2',
content: '<p>Content2</p>'
}, {
group: 'Group2',
title: 'Title2-1',
content: '<p>Content22</p>'
}, {
group: 'Group3',
title: 'Title3-1',
content: '<p>Content33</p>'
}, {
group: 'Group4',
title: 'Title4',
content: '<p>Content4</p>'
}, {
group: 'Group4',
title: 'Title4-1',
content: '<p>Content44</p>'
}];
var tempGroupName;
var menuItems = [];
function createTempMenu(editor) {
for (i = 0; i < tempGroups.length; i++) {
var tempArray = [];
tempArray[i] = [];
tempGroupName = tempGroups[i];
for (j = 0; j < temp.length; j++) {
if (temp[j].group == tempGroupName) {
tempArray[i].push({
text: temp[j].title,
content: temp[j].content,
// type: 'checkbox',
onclick: function () {
alert(this.settings.content);
}
});
}
}
menuItems[i] = {
text: tempGroupName,
menu: tempArray[i],
};
}
return menuItems;
}
tinymce.init({
selector: "textarea",
setup: function (editor) {
editor.addButton('button', {
type: 'menubutton',
text: 'button',
icon: false,
menu: [
{
text: 'Customer List',
onclick: function () {
editor.windowManager.open({
title: 'Customer Name',
width: 200,
height: 100,
items: [
{
type: 'listbox',
value: 0,
label: 'Section: ',
values: createTempMenu(editor),
body: [
{
type: 'checkbox',
label: 'Section: ',
// text: "new",
values: createTempMenu(editor),
}],
onsubmit: function (e) {
}
}]
});
}
}]
});
},
toolbar: " button "
});
Any help will be appreciated.

An old question just found it. If you're still looking for an answer you can refer to their reference Here it has further details
There's a type called checkbox in tinymce
{
type : 'checkbox',
name : 'choose the name',
label : 'choose a label',
text : 'the text near the checkbox',
checked : false
},