i really struggle with array.reduce() and i think in this case i'm not sure if i've got the right approach. Typically i have a starting array and i know what i need to end up with but i can't seem to get the grouping right.
This is the starting array
[
{ name: 'Home' },
{
name: 'Services',
menu: [
{ name: 'Painting' },
{ name: 'Decorating' },
{ name: 'Lawn mowing', submenu: 'Garden' },
{ name: 'Tree surgery', submenu: 'Garden' },
{ name: 'Edging', submenu: 'Garden' }
]
},
{ name: 'Contact' }
]
and what i'd like to end up with is this
[
{ name: 'Home' },
{
name: 'Services',
menu: [
{ name: 'Painting' },
{ name: 'Decorating' },
{
name: 'Garden',
menu: [
{ name: 'Lawn mowing', submenu: 'Garden' },
{ name: 'Tree surgery', submenu: 'Garden' },
{ name: 'Edging', submenu: 'Garden' }
]
}
]
},
{ name: 'Contact' }
]
So i'd like to be able to group by anything that has a submenu and then return a new sorted array.
Try the following recursive approach:
function reduce(array) {
const result = [];
// object to keep grouped submenus
const grouped = {};
for (let i of array) {
if (i.menu) {
// if the current item has a nested menu we call reduce recursively
result.push({
name: i.name,
menu: reduce(i.menu)
});
} else if (i.submenu) {
// if it has a submenu we put it to the grouped object
if (grouped[i.submenu]) {
grouped[i.submenu].menu.push(i)
} else {
grouped[i.submenu] = {
name: i.submenu,
menu: [i]
};
result.push(grouped[i.submenu]);
}
} else {
// else we just copy it to the result array
result.push(i);
}
}
return result;
}
const array = [
{ name: 'Home' },
{
name: 'Services',
menu: [
{ name: 'Painting' },
{ name: 'Decorating' },
{ name: 'Lawn mowing', submenu: 'Garden' },
{ name: 'Tree surgery', submenu: 'Garden' },
{ name: 'Edging', submenu: 'Garden' }
]
},
{ name: 'Contact' }
];
console.log(reduce(array));
You could reduce the array by looking for submenu and take this for a seach of a node in the actual level.
If not just add either a new object or one with a menu from the recursive call.
function mapSubmenu(result, { name, menu, submenu }) {
if (submenu) {
var parent = result.find(({ name }) => name === submenu);
if (!parent) result.push(parent = { name: submenu, menu: [] });
parent.menu.push({ name, submenu });
} else {
result.push(menu
? { name, menu: menu.reduce(mapSubmenu, []) }
: { name }
);
}
return result;
}
var data = [{ name: 'Home' }, { name: 'Services', menu: [{ name: 'Painting' }, { name: 'Decorating' }, { name: 'Lawn mowing', submenu: 'Garden' }, { name: 'Tree surgery', submenu: 'Garden' }, { name: 'Edging', submenu: 'Garden' }] }, { name: 'Contact' }],
result = data.reduce(mapSubmenu, []);
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
Related
Example of the data (useContext)
data: {
projects:{
'project-1':{
name: 'project-1',
columnIds:['column-1', 'column-2'],
},
'project-2':{
name: 'project-2',
columnIds:['column-3'],
},
},
columns:{
'column-1':{
title: 'column-1',
content: 'abc',
},
'column-2':{
title: 'column-2',
content: 'def',
},
'column-3':{
title: 'column-3',
content: 'ghi',
},
},
}
If I delete the project-1 which has column-1 and column-2, it should also be deleted inside the columns object. So the result should be:
data: {
projects:{
'project-2':{
name: 'project-2',
columnIds:['column-3'],
},
},
columns:{
'column-3':{
title: 'column-3',
content: 'ghi',
},
},
}
I already know how to remove project-1 object but I'm stuck in removing the column-1 and column-2.
This was my code for removing column-1 and `column-2 data:
let newColumn = data.projects[projectname].columnIds.map((item) =>
Object.keys(data.columns).filter((key) => key !== item)
);
You just need to check if there are corresponding column IDs before you delete the property. If there are, iterate over the IDs and delete the columns:
const data = {
projects: {
'project-1': {
name: 'project-1',
columnIds: ['column-1', 'column-2'],
},
'project-2': {
name: 'project-2',
columnIds: ['column-3'],
},
},
columns: {
'column-1': {
title: 'column-1',
content: 'abc',
},
'column-2': {
title: 'column-2',
content: 'def',
},
'column-3': {
title: 'column-3',
content: 'ghi',
},
},
}
const key = 'project-1'
const { columnIds } = data.projects[key]
if (columnIds.length > 0) {
columnIds.forEach(id => {
delete data.columns[id]
})
}
delete data.projects[key]
console.log(data)
You can also create a copy of the object so you don't mutate the original one:
const data = {
projects: {
'project-1': {
name: 'project-1',
columnIds: ['column-1', 'column-2'],
},
'project-2': {
name: 'project-2',
columnIds: ['column-3'],
},
},
columns: {
'column-1': {
title: 'column-1',
content: 'abc',
},
'column-2': {
title: 'column-2',
content: 'def',
},
'column-3': {
title: 'column-3',
content: 'ghi',
},
},
}
function deleteColumns(obj, key) {
const copy = {
projects: { ...obj.projects },
columns: { ...obj.columns }
}
const { columnIds } = copy.projects[key]
if (columnIds.length > 0) {
columnIds.forEach(id => delete copy.columns[id])
}
delete copy.projects[key]
return copy
}
const afterDelete = deleteColumns(data, 'project-1')
console.log(afterDelete)
console.log(data)
I am trying to implement search with multilevel array.
Consider i have JSON multilevel array as below
const testData = [
{
menu: 'Test',
submenu: [
{
menu: 'Test1',
},
{
menu: 'Test2',
submenu: [
{
menu: 'Test2.1',
},
{
menu: 'Test2.2',
},
{
menu: 'Test2.3',
},
],
},
{
menu: 'TestNew',
submenu: [
{
menu: 'TestNew1.1',
},
{
menu: 'TestNew1.2'
},
{
menu: 'TestNew1.3',
},
],
},
],
}]
i have search box if i try to search for a word Test2.3 i would like the JSON to be in below format
const testData = [
{
menu: 'Test',
submenu: [
{
menu: 'Test2',
submenu: [
{
menu: 'Test2.3'
},
],
},
],
}]
I have referenced the link Using array.filter down multiple levels but it doesn't meet my output. its returning all the submenu like below
const testData = [
{
menu: 'Test',
submenu: [
{
menu: 'Test1',
},
{
menu: 'Test2',
submenu: [
{
menu: 'Test2.1',
},
{
menu: 'Test2.2',
},
{
menu: 'Test2.3',
},
],
},
],
}]
Do we have any another method to meet my expectations.
Thanks in advance
You could use a recursive approach with reduce method that will only return those sub menu elements where the target value is found and filter out the other elements.
const data = [{"menu":"Test","submenu":[{"menu":"Test1"},{"menu":"Test2","submenu":[{"menu":"Test2.1"},{"menu":"Test2.2"},{"menu":"Test2.3"}]},{"menu":"TestNew","submenu":[{"menu":"TestNew1.1"},{"menu":"TestNew1.2"},{"menu":"TestNew1.3"}]}]}]
function search(data, value) {
return data.reduce((r, e) => {
const object = { ...e }
const result = search(e.submenu || [], value)
if (result.length) object.submenu = result
if (e.menu == value || result.length) r.push(object)
return r;
}, [])
}
console.log(search(data, 'Test2.1'))
console.log(search(data, 'TestNew1.3'))
I want to sort the above given array so that the output array will be as given in output section. I have tried some code which is given below. I am using javascript for sorting. In angular I am using this To display menu according to user role.
I have googled a lot but not getting solution
this.items = [
{
label: 'Home', routerLink: ['Home']
},
{
label: 'menu1',
items: [
{
label: 'submenu1',
routerLink: '/submenu1'
},
{
label: 'submenu2'
, routerLink: '/submenu2'
},
{
label: 'submenu3',
routerLink: ['/submenu3']
}
]
},
{
label: 'menu2',
items: [
{
label: 'submenu5',
routerLink: ['/submenu5']
},
]
},
{
label: 'menu3',
items: [
{
label: 'submenu6',
routerLink: ['/submenu6'],
}
]
},
];
output:
this.items = [
{
label: 'Home', routerLink: ['Home']
},
{
label: 'menu1',
items: [
{
label: 'submenu1',
routerLink: '/submenu1'
}
]
},
{
label: 'menu3',
items: [
{
label: 'submenu6',
routerLink: ['/submenu6'],
}
]
},
];
code for sorting:
let filterArr = this.filteredArray
.filter(x => x.label == "Home" && x.label == "menu3")
.map(y => y.items.filter(z => z.label == 'submenu6'));
You could move the wanted menu and submenu labels into arrays and filter the objects by creating new object with filtered menus.
This approach does not mutate the data.
It uses Array#flatMap for the outer array and Array#filter for getting the wanted parts of the nested array.
If the nested array does not have any item, then take the original object.
var items = [{ label: 'Home', routerLink: ['Home'] }, { label: 'menu1', items: [{ label: 'submenu1', routerLink: '/submenu1' }, { label: 'submenu2', routerLink: '/submenu2' }, { label: 'submenu3', routerLink: ['/submenu3'] }] }, { label: 'menu2', items: [{ label: 'submenu5', routerLink: ['/submenu5'] }] }, { label: 'menu3', items: [{ label: 'submenu6', routerLink: ['/submenu6'] }] }],
menu = ['Home', 'menu1', 'menu3'],
submenu = ['submenu1', 'submenu6'],
result = items.flatMap(o => {
if (!menu.includes(o.label)) return [];
var items = (o.items || []).filter(({ label }) => submenu.includes(label));
return items.length ? { ...o, items } : o;
});
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
I'm trying to filter a on a nested array inside an array of objects in an Angular app. Here's a snippet of the component code -
var teams = [
{ name: 'Team1', members: [{ name: 'm1' }, { name: 'm2' }, { name: 'm3' }] },
{ name: 'Team2', members: [{ name: 'm4' }, { name: 'm5' }, { name: 'm6' }] },
{ name: 'Team3', members: [{ name: 'm7' }, { name: 'm8' }, { name: 'm9' }] }
];
What I'm trying to achieve is if I search for m5 for example my result should be -
var teams = [
{ name: 'Team1', members: [] },
{ name: 'Team2', members: [{ name: 'm5' }] },
{ name: 'Team3', members: [] }
];
So I've got teams and filteredTeams properties and in my search function I'm doing -
onSearchChange(event: any): void {
let value = event.target.value;
this.filteredTeams = this.teams.map(t => {
t.members = t.members.filter(d => d.name.toLowerCase().includes(value));
return t;
})
}
Now this does work to some extent however because I'm replacing the members it's destroying the array on each call (if that makes sense). I understand why this is happening but my question is what would be the best way to achieve this filter?
you were very close, the only thing that you did wrong was mutating the source objects in teams
basically you can use spread operator to generate a new entry and then return a whole new array with new values.
const teams = [
{ name: 'Team1', members: [{ name: 'm1' }, { name: 'm2' }, { name: 'm3' }] },
{ name: 'Team2', members: [{ name: 'm4' }, { name: 'm5' }, { name: 'm6' }] },
{ name: 'Team3', members: [{ name: 'm7' }, { name: 'm8' }, { name: 'm9' }] }
];
const value = 'm5';
const result = teams.map(t => {
const members = t.members.filter(d => d.name.toLowerCase().includes(value));
return { ...t, members };
})
console.log(result)
Check this. Instead of hard coded m5 pass your value.
const teams = [
{ name: 'Team1', members: [{ name: 'm1' }, { name: 'm2' }, { name: 'm3' }] },
{ name: 'Team2', members: [{ name: 'm4' }, { name: 'm5' }, { name: 'm6' }] },
{ name: 'Team3', members: [{ name: 'm7' }, { name: 'm8' }, { name: 'm9' }] }
];
const filteredTeams = teams.map(team => ({ name: team.name, members: team.members.filter(member => member.name.includes('m5')) }));
console.log(filteredTeams);
You are mutating the original objects, but you could assing new properties to the result object for mapping instead.
var teams = [{ name: 'Team1', members: [{ name: 'm1' }, { name: 'm2' }, { name: 'm3' }] }, { name: 'Team2', members: [{ name: 'm4' }, { name: 'm5' }, { name: 'm6' }] }, { name: 'Team3', members: [{ name: 'm7' }, { name: 'm8' }, { name: 'm9' }] }],
result = teams.map(o => Object.assign(
{},
o,
{ members: o.members.filter(({ name }) => name === 'm5') }
));
console.log(result);
console.log(teams);
.as-console-wrapper { max-height: 100% !important; top: 0; }
Try to seperate your filter function first:
const filterTeamMembers = (teams, filterArr) => {
const useFilter = filterArr.map(x => x.toLowerCase());
return teams.map(team => ({
...team,
members: team.members.filter(member => useFilter.includes(member.name))
}))
};
// =========== And then:
onSearchChange(event: any): void {
let value = event.target.value;
this.filteredTeams = filterTeamMembers(this.teams, [value]);
}
I'm a beginner meteor. I create a blog with many posts(article) by each categories. This is my Collection:
if (Category.find().count() === 0) {
[
{
name: 'IT',
sub_categories: [
{ name: 'Java' },
{ name: 'PHP' },
{ name: '.NET' },
{ name: 'Android/iOS' },
{ name: 'HTML/CSS' },
{ name: 'Javascript and Framworks' },
{ name: 'Ruby on Rails' },
],
},
{
name: 'ENGLISH',
sub_categories: [
{ name: 'Listening' },
{ name: 'Speaking' },
{ name: 'Writing' },
{ name: 'Reading' },
{ name: 'Topic' },
],
},
{
name: 'SoftSkill',
sub_categories: [
{ name: 'CV and CL' },
{ name: 'Presentation' },
{ name: 'Teamwork' },
],
},
{
name: 'ENTERTAINMENT',
sub_categories: [
{ name: 'Sports' },
{ name: 'Games' },
{ name: 'Music & Videos' },
{ name: 'Fashion' },
{ name: 'Talk show' },
],
},
].forEach(doc => {
Category.insert(doc);
});
}
After I save all posts by each categories, Now I want to show it throught select option
Details:
When I click on "IT" button -> app show all sub_categories. Then I choose one option (example "Java") it will show all posts have sub_categories = "Java". Can you help me to do it?
You can use navbar for your requirement.
In that navbar you can have dropdown as navbar element
Please Follow this steps if it is useful for you