Develop Reference

fillter arrays of objects

i have two arrays.
const department = [
{ id: '1', name: 'department1' },
{ id: '2', name: 'department2' },
];
const models = [
{
id: '23',
name: 'model1',
departments: [{ id: '1', name: 'department1' }],
},
{
id: '54',
name: 'model2',
departments: [
{ id: '1', name: 'department1' },
{ id: '2', name: 'department2' },
],
},
];
i need to render accordions with department names and accordion details with matching models names. My question is how to filter those arrays to get models

We can map through the departments array, and add a models property that equals the models array, but filtered only to the ones that contain a matching department id.
const departments = [
{ id: "1", name: "department1" },
{ id: "2", name: "department2" },
];
const models = [
{
id: "23",
name: "model1",
departments: [{ id: "1", name: "department1" }],
},
{
id: "54",
name: "model2",
departments: [
{ id: "1", name: "department1" },
{ id: "2", name: "department2" },
],
},
];
const getDepartmentsWithModels = () => {
return departments.map((department) => {
return {
...department,
models: models.filter((model) => {
const modelDepartmentIds = model.departments.map(({ id }) => id);
return modelDepartmentIds.includes(department.id);
}),
};
});
};
console.log(getDepartmentsWithModels());
// [ { id: '1', name: 'department1', models: [ [Object], [Object] ] },
// { id: '2', name: 'department2', models: [ [Object] ] } ]```

I've built some code, which iterates over the departments. For each department it iterates the models and for each model it checks if the department is within the model departments.
const department =
[
{ id: '1', name: 'department1' },
{ id: '2', name: 'department2' }
]
const models =
[
{
id: '23',
name: 'model1',
departments: [{ id: '1', name: 'department1' }]
},
{
id: '54',
name: 'model2',
departments: [{ id: '1', name: 'department1' },{ id: '2', name: 'department2' }]
}
]
department.forEach( dep => {
console.log(`Department: ${dep.name}`)
models.forEach(model => {
if (model.departments.find(modelDep => dep.id===modelDep.id)) {
console.log(` Model: ${model.name}`)
}
})
})
If you could change your data objects, then your code could be much smoother.
I've changed your data objects slightly by just reducing the departments in a model to be an array of department id's. This code iterates over the departments. For each department it filters the models and iterates over the filtered models to output them to the console. This is lesser code and provides much better performance.
const department =
[
{ id: '1', name: 'department1' },
{ id: '2', name: 'department2' }
]
const models =
[
{
id: '23',
name: 'model1',
departments: ['1']
},
{
id: '54',
name: 'model2',
departments: ['1', '2']
}
]
department.forEach( dep => {
console.log(`Department: ${dep.name}`)
models.filter(model => model.departments.includes(dep.id)).forEach(model => {
console.log(` Model: ${model.name}`)
})
})

There are two solutions.
Using Array.reduce() --> returns an object where the key is department name and value is an array of the names of matching models:
let data1 = models.reduce((res, curr) => {
curr.departments.forEach(dep => {
if (!res[dep.name]) {
res[dep.name] = [curr.name]
} else {
if (!res[dep.name].includes(curr.name)) {
res[dep.name].push(curr.name);
}
}
})
return res;
}, {});
Using map and filter --> returns an array of kind:
[{department: [names of the models]},...]
let data2 = department.map(dep => {
let matchingModels = models.filter(model => {
return model.departments.filter(modDep => {
return modDep.name === dep.name;
}).length > 0;
}).map(mod => {
return mod.name;
});
return {
department: dep.name,
models: matchingModels
}
});

Flattening 1 level of object array and appending parent object

I have an object like which I want to flatten:
const obj = [
{
id: 1,
name: 'parent1',
children: [
{
childName: ''child11"
}
]
},
{
id: 2,
name: 'parent2',
children: [
{
childName: ''child21"
},
{
childName: ''child22"
}
]
}
]
I want my object to be like below:
eObj = [
{
p_id: 1,
p_name: "parent1",
childName: "child11"
},
{
p_id: 2,
p_name: "parent2",
childName: "child21"
},
{
p_id: 2,
p_name: "parent2",
childName: "child22"
}
]
I have done it using:
const eObj = [];
obj.forEach((o) => {
o.children.forEach((co) => {
eObj.push({
p_id: o.id,
p_name: o.name,
...children,
});
});
});
Is there a better way to do it, and also to reduce the nested for loop? I would really appreciate it.

If you are interested in what solution is more efficient.
Turns out your double forEach-solution is actually faster than the flatMap & map.
flatMap & map
const obj = [{
id: 1,
name: "parent1",
children: [{
childName: "child11",
}, ],
},
{
id: 2,
name: "parent2",
children: [{
childName: "child21",
},
{
childName: "child22",
},
],
},
];
const result = obj.flatMap(({
children,
id,
name
}) =>
children.map((child) => ({
p_id: id,
p_name: name,
childName: child.childName,
}))
);
console.log(result);
double forEach
const obj = [{
id: 1,
name: "parent1",
children: [{
childName: "child11",
}, ],
},
{
id: 2,
name: "parent2",
children: [{
childName: "child21",
},
{
childName: "child22",
},
],
},
];
const result = [];
obj.forEach((o) => {
o.children.forEach((co) => {
result.push({
p_id: o.id,
p_name: o.name,
childName: co.childName,
});
});
});
console.log(result);

You can use flatmap. This works:
eObj = obj.flatMap(item => item.children.map(child => ({p_id: item.id, p_name: item.name, childName: child.childName})))

Each way to do that needs two levels loop. You may use map or reduce function and your code may be clear but nothing change the time complexity.
But in this scenario you only need map function:
const obj = [
{
id: 1,
name: 'parent1',
children: [
{
childName: 'child11'
}
]
},
{
id: 2,
name: 'parent2',
children: [
{
childName: 'child21'
},
{
childName: 'child22'
}
]
}
]
const eObj = obj.flatMap(t=>t.children.map(c => { return {p_id: t.id,p_name: t.name, childName: c.childName}}))
console.log(eObj);

JavaScript clean array object

Hello I have a array of objects that contain array of objects. I would like to know how I can clean properties empty if my user search leather for example.
My result:
let cars = [{
name: 'Volvo',
equipments: [
{ name: 'saddleries', options: [{title: 'leather'}] },
{ name: 'wheels', options: [title: 'sliver'}] },
{ name: 'motor', options: [] }]
}];
I would like this result :
let cars = [{
name: 'Volvo',
equipments: [
{ name: 'saddleries', options: [{title: 'leather'}] },
{ name: 'wheels', options: [title: 'sliver'}] },
}];
How I can remove my data please ? thanks

Check this code
let cars = [{
name: 'Volvo',
equipments: [
{ name: 'saddleries', options: [{title: 'leather'}] },
{ name: 'wheels', options: [{title: 'sliver'}] },
{ name: 'motor', options: [] }]
}];
cars.forEach((c) => {
c.equipments = c.equipments.filter(e => e.options.length !== 0);
})
console.log(cars)

Try this:
var cars = {
name: 'Volvo',
equipments: [{
name: 'saddleries',
options: [{
title: 'leather'
}]
},
{
name: 'wheels',
options: [{
title: 'sliver'
}]
},
{
name: 'motor',
options: []
},
{
name: 'handles',
options: []
}
]
};
carsCopy = Object.assign([], cars.equipments)
var count = 0
cars.equipments.forEach(function(data, index) {
if (data.options.length === 0) {
carsCopy.splice(index - count, 1);
count++;
}
})
console.log(carsCopy)

Search for an object in a recursive object structure (representing a file system)

I'd like to pass as an input the name of a folder that I want to search for, and get as an output the object that it belongs to.
My array is like this:
const array = {
item: [{
name: "parentFolder1",
item: [{
name: "subFolder1",
item: []
},
{
name: "subFolder2",
item: []
}
]
},
{
name: "parentFolder2",
item: [{
name: "sub1",
item: []
},
{
name: "sub2",
item: []
}
]
}
]
};
const sub = Object.values(array).map(x =>
x.find(y => y.item.find(obj => obj.name = "sub2")))
console.dir(sub)
The output I want:
{
name: "sub2",
item: []
}
The output I get:
[ { name: 'parentFolder1', item: [ [Object], [Object] ] } ]

const array = {
item: [{
name: "parentFolder1",
item: [{
name: "subFolder1",
item: []
},
{
name: "subFolder2",
item: []
}
]
},
{
name: "parentFolder2",
item: [{
name: "sub1",
item: []
},
{
name: "sub2",
item: []
}
]
}
]
};
const val = array.item.map(folder => folder.item.find(obj => obj.name === "sub2")).find(val => val)
console.log(val)

If you need it to be recursive
function find(name, obj) {
if(obj.name === name) return obj;
return obj.item.reduce((result, item) => result || find(name, item), false)
}
const array = {
item: [{
name: "parentFolder1",
item: [{
name: "subFolder1",
item: []
},
{
name: "subFolder2",
item: [{
name: "subsub",
item: [{
name: "searchme",
item: []
}]
}]
}
]
},
{
name: "parentFolder2",
item: [{
name: "sub1",
item: []
},
{
name: "sub2",
item: []
}
]
}
]
};
console.log(find("searchme", array))

Javascript filtering nested arrays

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