We Keep Coding

I have sections which have a feelings property which is an array of objects. How to filter all feelings which are selected from all sections in array?

I have the following JSON structure:
const sections = [
{
title: "section one",
expanded: false,
feelings: [
{
title: "Joyful",
selected: true,
},
{
title: "Happy",
selected: false,
},
{
title: "Ecstatic",
selected: true,
},
]
},
{
title: "section two",
expanded: false,
feelings: [
{
title: "Angry",
selected: true,
},
{
title: "Mad",
selected: false,
},
]
},
]
I want to filter all feelings that are selected in an array of their own disregarding their section. So the expected outcome should look like this:
[
{
"title": "Joyful",
"selected": true
},
{
"title": "Ecstatic",
"selected": true
},
{
"title": "Angry",
"selected": true
}
]
I tried the following:
const selectedFeelings = feelings.map((feeling) => {
return feeling.sectionFeelings.filter((sectionFeeling) => {
return sectionFeeling.selected === true;
});
});
But this returns them in separate arrays:
[
[
{
"title": "Joyful",
"selected": true
},
{
"title": "Ecstatic",
"selected": true
}
],
[
{
"title": "Angry",
"selected": true
},
],
]

You could use Array.flatMap() along with Array.filter() to return the desired result:
const sections = [ { title: "section one", expanded: false, feelings: [ { title: "Joyful", selected: true, }, { title: "Happy", selected: false, }, { title: "Ecstatic", selected: true, }, ] }, { title: "section two", expanded: false, feelings: [ { title: "Angry", selected: true, }, { title: "Mad", selected: false, }, ] }, ]
const selectedFeelings = sections.flatMap((section) => {
return section.feelings.filter(({ selected }) => selected);
});
console.log(selectedFeelings)
.as-console-wrapper { max-height: 100% !important; }
You could also use Array.reduce() to get the same result:
const sections = [ { title: "section one", expanded: false, feelings: [ { title: "Joyful", selected: true, }, { title: "Happy", selected: false, }, { title: "Ecstatic", selected: true, }, ] }, { title: "section two", expanded: false, feelings: [ { title: "Angry", selected: true, }, { title: "Mad", selected: false, }, ] }, ]
const selectedFeelings = sections.reduce((acc, {feelings}) => {
return [...acc, ...feelings.filter(({ selected }) => selected)];
}, []);
console.log(selectedFeelings)
.as-console-wrapper { max-height: 100% !important; }

You can flatten the returned array once you filter it
const selectedFeelings = feelings.map((feeling) => {
return feeling.sectionFeelings.filter((sectionFeeling) => {
return sectionFeeling.selected === true;
});
}).flat(1);

this is using ES6
const sections = [
{
title: "section one",
expanded: false,
feelings: [
{
title: "Joyful",
selected: true,
},
{
title: "Happy",
selected: false,
},
{
title: "Ecstatic",
selected: true,
},
]
},
{
title: "section two",
expanded: false,
feelings: [
{
title: "Angry",
selected: true,
},
{
title: "Mad",
selected: false,
},
]
},
];
const newArr = sections.map(({ feelings, ...rest }) => {
return rest;
});
console.log(newArr);

Comparing two arrays - removing element from array based on object keys

I have two objects.
const arrayOne = [
{
label: "Categories",
to: "/categories",
id: "product_type",
},
{
label: "Colors",
to: "/colors",
id: "color",
},
{
label: "Materials",
to: "/materials",
id: "material",
},
{
label: "Sizes",
to: "/sizes",
id: "sizes",
},
{
label: "Designers",
to: "/designers",
id: "designer_slug",
},
{
label: "Stores",
to: "/stores",
id: "retailer_slug",
},
];
const arrayTwo = [
{
id: "gender",
label: "Gender",
lazy_loaded: false,
},
{
id: "product_type",
label: "Category",
lazy_loaded: false,
},
{
id: "quick_filters",
label: "Quick filters",
lazy_loaded: false,
},
{
id: "final_price",
label: "Price",
lazy_loaded: false,
},
{
id: "color",
label: "Color",
lazy_loaded: false,
},
{
id: "material",
label: "Material",
lazy_loaded: false,
},
{
id: "designer_slug",
label: "Brand",
lazy_loaded: true,
},
{
id: "retailer_slug",
label: "Store",
lazy_loaded: true,
},
];
As you can see they both have the key 'id'. If the IDs in arrayOne aren't in arrayTwo, I would like them to be removed from arrayOne (the whole object). So in this case, only the object with "sizes" should be removed from arrayOne. How would I go about doing this? Thanks in advance!

you could utilize filter:
const newArrayOne = arrayOne.filter(x => arrayTwo.find(y => y.id === x.id))

You could use a Set with id and filter the other array.
const
arrayOne = [{ label: "Categories", to: "/categories", id: "product_type" }, { label: "Colors", to: "/colors", id: "color" }, { label: "Materials", to: "/materials", id: "material" }, { label: "Sizes", to: "/sizes", id: "sizes" }, { label: "Designers", to: "/designers", id: "designer_slug" }, { label: "Stores", to: "/stores", id: "retailer_slug" }],
arrayTwo = [{ id: "gender", label: "Gender", lazy_loaded: false }, { id: "product_type", label: "Category", lazy_loaded: false }, { id: "quick_filters", label: "Quick filters", lazy_loaded: false }, { id: "final_price", label: "Price", lazy_loaded: false }, { id: "color", label: "Color", lazy_loaded: false }, { id: "material", label: "Material", lazy_loaded: false }, { id: "designer_slug", label: "Brand", lazy_loaded: true }, { id: "retailer_slug", label: "Store", lazy_loaded: true }],
two = new Set(arrayTwo.map(({ id }) => id)),
result = arrayOne.filter(({ id }) => two.has(id));
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

Compare 2 Arrays of Objects

I want to compare 2 Arrays of Objects to find the object or objects which is not matched.
In the example below it should output {label: 'Addition', type: 'address', name: 'address_4', defaultValue: 'test'} as this Object is not matched.
const A = [{
label: 'Street Name',
type: 'address',
name: 'address_1',
defaultValue: 'test1'
},
{
label: 'House Number',
type: 'address',
name: 'address_2',
defaultValue: '1563l1'
},
{
label: 'Addition',
type: 'address',
name: 'address_3',
defaultValue: 'ABC684'
}
]
const B = [{
label: 'Street Name',
type: 'address',
name: 'address_1',
defaultValue: 'test1'
},
{
label: 'House Number',
type: 'address',
name: 'address_2',
defaultValue: '1563l1'
},
{
label: 'Addition',
type: 'address',
name: 'address_3',
defaultValue: 'ABC684'
},
{
label: 'Addition',
type: 'address',
name: 'address_4',
defaultValue: 'test'
}
]
const newSet = A;
const currentSet = B;
let difference = currentSet.filter((page1) => !newSet.find(page2 => page1.name === page2.name))
console.log(difference);
This does not work. It outputs an empty Array. What I'm doing wrong?

You might by comparing A with B which returns an empty array because there is no element in A which doesn't exist in B instead you should compare B with A.
Below code will return an empty array
const A = [
{
label: "Street Name",
type: "address",
name: "address_1",
defaultValue: "test1",
},
{
label: "House Number",
type: "address",
name: "address_2",
defaultValue: "1563l1",
},
{
label: "Addition",
type: "address",
name: "address_3",
defaultValue: "ABC684",
},
];
const B = [
{
label: "Street Name",
type: "address",
name: "address_1",
defaultValue: "test1",
},
{
label: "House Number",
type: "address",
name: "address_2",
defaultValue: "1563l1",
},
{
label: "Addition",
type: "address",
name: "address_3",
defaultValue: "ABC684",
},
{
label: "Addition",
type: "address",
name: "address_4",
defaultValue: "test",
},
];
let difference = A.filter((page1) => {
const result = B.find((page2) => page1.name === page2.name);
return !result;
});
console.log(difference);
You should compare B with A as:
const A = [
{
label: "Street Name",
type: "address",
name: "address_1",
defaultValue: "test1",
},
{
label: "House Number",
type: "address",
name: "address_2",
defaultValue: "1563l1",
},
{
label: "Addition",
type: "address",
name: "address_3",
defaultValue: "ABC684",
},
];
const B = [
{
label: "Street Name",
type: "address",
name: "address_1",
defaultValue: "test1",
},
{
label: "House Number",
type: "address",
name: "address_2",
defaultValue: "1563l1",
},
{
label: "Addition",
type: "address",
name: "address_3",
defaultValue: "ABC684",
},
{
label: "Addition",
type: "address",
name: "address_4",
defaultValue: "test",
},
];
let difference = B.filter((page1) => {
const result = A.find((page2) => page1.name === page2.name);
return !result;
});
console.log(difference);
If there is a case where you want to get the difference between two array then you can do as:
const [small, large] = A.length < B.length ? [A, B] : [B, A];
let difference = large.filter((page1) => {
const result = small.find((page2) => page1.name === page2.name);
return !result;
});

How to map a object into a object

Having a problem with two arrays of objects and I want to concat data of them related to their id's.
I have two arrays of objects like this:
const data = [
{
default: false,
id: 1,
value: true,
idModule: 1
},
{
default: false,
id: 2,
value: true,
idModule: 1
},
{
default: false,
id: 3,
value: true,
idModule: 2
},
{
default: false,
id: 4,
value: true,
idModule: 2
}
];
const modulData = [
{
name: 'Administration',
id: 1,
},
{
name: 'Benutzerverwaltung',
id: 2,
}
];
Now I want to combine these two related with their idModule == id
to create a new array of objects like this for example:
const result = [
{
name: 'Administration',
id: 1,
modul: [
{
default: false,
id: 1,
value: true,
idModule: 1
},
{
default: false,
id: 2,
value: true,
idModule: 1
},
],
},
{
name: 'Benutzerverwaltung',
id: 2,
modul: [
{
default: false,
id: 3,
value: false,
idModule: 2
},
{
default: false,
id: 4,
value: false,
idModule: 2
},
],
}
];
How can I achieve this?

You can do it simple by using map and filter:
let result = modulData.map(x => {
x.modul = data.filter(d => d.idModule === x.id);
return x;
});
Full code:
const data = [{
default: false,
id: 1,
value: true,
idModule: 1
},
{
default: false,
id: 2,
value: true,
idModule: 1
},
{
default: false,
id: 3,
value: true,
idModule: 2
},
{
default: false,
id: 4,
value: true,
idModule: 2
}
];
const modulData = [{
name: 'Administration',
id: 1,
},
{
name: 'Benutzerverwaltung',
id: 2,
}
];
let result = modulData.map(x => {
x.modul = data.filter(d => d.idModule === x.id);
return x;
});
console.log(result);

Filtering Nested Array with Lodash/Javascript

I have the following object array:
var sizeList = [
{ id: 1, title:"Test1",
type:[{name:"Big", present:false}, {name:"Small", present:true}, {name:"Medium", present:false}]
},
{ id: 2,title:"Test2",
type:[{name:"Big", present:false}, {name:"Small", present:true}, {name:"Medium", present:false}]
},
{ id: 3,title:"Test3",
type:[{name:"Big", present:false}, {name:"Small", present:true}, {name:"Medium", present:true}]
}
]
I want to filter this list where Medium is True. I currently have this set up.
var specificSizes = _.filter(sizeList.type, { 'name': 'Medium', 'present': true })
This keeps returning an empty array. I also tried this:
specificSizes = _.filter(sizeList.type, function (type) {
return _.some(type, {'name': 'Medium', 'present':true})
});

With lodash, you could wrap the condition in the same structure for the test, as the original object.
_.filter(sizeList, { type: [{ name: 'Medium', present: true }] })
var sizeList = [{ id: 1, title: "Test1", type: [{ name: "Big", present: false }, { name: "Small", present: true }, { name: "Medium", present: false }] }, { id: 2, title: "Test2", type: [{ name: "Big", present: false }, { name: "Small", present: true }, { name: "Medium", present: false }] }, { id: 3, title: "Test3", type: [{ name: "Big", present: false }, { name: "Small", present: true }, { name: "Medium", present: true }] }],
result = _.filter(sizeList, { type: [{ name: 'Medium', present: true }] });
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
In plain Javascript, you could use Array#filter for the outer array and check with Array#some if one condition met.
var sizeList = [{ id: 1, title: "Test1", type: [{ name: "Big", present: false }, { name: "Small", present: true }, { name: "Medium", present: false }] }, { id: 2, title: "Test2", type: [{ name: "Big", present: false }, { name: "Small", present: true }, { name: "Medium", present: false }] }, { id: 3, title: "Test3", type: [{ name: "Big", present: false }, { name: "Small", present: true }, { name: "Medium", present: true }] }],
result = sizeList.filter(function (a) {
return a.type.some(function (b) {
return b.name === 'Medium' && b.present;
});
});
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }