Develop Reference

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

Dynamic List with jquery json data

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>

How do I make an element filter in React?

There is a state in which the selected filters are written:
state = {
filters: [],
};
There's a list of items:
const json = [
{action : true, new : true, name : 'Морський'},
{action : true, new : false, name : 'Дольче Віта' },
{action : false, new : false, name : 'Спекотний сезон' },
{action : false, new : true, name : 'Уікенд' },
]
How do I filter items by selected filters? A state with filters can look like this: filters ["new", "action"]

Use filter with every
const result = json.filter(x => filters.every(y => x[y]));
const filters = ["new", "action"];
const json = [
{ action: true, new: true, name: "Морський" },
{ action: true, new: false, name: "Дольче Віта" },
{ action: false, new: false, name: "Спекотний сезон" },
{ action: false, new: true, name: "Уікенд" }
];
const result = json.filter(x => filters.every(y => x[y]));
console.log(result)

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,
};
}),
};
});
}

Grouping values in grid panel after double clicking

I want to group the values in grid panel
Below is the code:
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "School Friends", expanded: true, children: [
{ text: "Mike", leaf: true, name: "Mike", email: "mike#stackoverflow.com", phone: "345-2222"},
{ text: "Laura", leaf: true, name: "Laura", email: "laura#stackoverflow.com", phone: "345-3333"}
] },
{ text: "Facebook Friend", expanded: true, children: [
{ text: "Steve", leaf: true, name: "Steve", email: "steve#stackoverflow.com", phone: "345-2222"},
{ text: "Lisa", leaf: true, name: "Lisa", email: "lisa#stackoverflow.com", phone: "345-3333"}
] },
]
}});
Ext.create('Ext.tree.Panel', {
title: 'All My Friends',
width: 200,
height: 150,
store: store,
rootVisible: false,
renderTo: Ext.getBody(),
listeners : {
itemdblclick : function(tree, record, index){
Ext.getStore('simpsonsStore').loadRawData([record.raw], true);
}
}});
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Bart', "email":"bart#simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home#simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge#simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}});
Ext.create('Ext.grid.Panel', {
title: 'Best Friends',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()});
From the above code I am able to get the values from treepanel to grid panel by double clicking.
I want an extra column to group values if we double click the same leaf in the treepanel.
For example if we double click Bart 6 times
Name email phonenumber groupby(number of times)
Bart bart#simpsons.com 555-222-1234 6
It should not append same value in the grid panel.
Could any one please help me.
Regards,
sreekanth

You'll need to add a count field to your store's fields. Then, you'll need to add the field to your grid. When you double-click the tree, you'll need to check the store to see if the record already exists. If it does, change the value in the count field; otherwise, add a new row.
itemdblclick: function (tree, record, index) {
var s = Ext.getStore('simpsonsStore'),
existingRecIdx = s.findBy(function (r) {
return r.get('email') === record.raw['email'];
});
if (existingRecIdx === -1) { //row not found
record.raw.clickCt = 1;
s.loadRawData([record.raw], true);
} else {
var r = s.getAt(existingRecIdx);
r.data.clickCt++;
grid.getView().refresh(); //once the data has changed
//refresh the grid
}
}
See http://jsfiddle.net/Kk7gL/