Javascript using .filter on nested arrays - javascript

I am hoping there is a way to use .filter() for a nested array to make things a little easier on the eyes.
Here is a basic example of what I want.
[
{
people: [
{
name: 'sam',
id: 1
}
{
name: 'john',
id: 2
}
]
},
people: [
{
name: 'marry',
id: 1
},
{
name: 'paul',
id: 1
}
]
},
...
]
can I use .filter to get all the people with id of 1?
I can do it by using .filter with a
for(...){
for(...){
...
}
...
}
but I don't really want nested for loops as this will add unnecessary complexity.
Edit: I would like output to look like a single array of the nested people object
[{
name: 'sam',
id: 1
},
{
name: 'john',
id: 1
},
{
name: 'john',
id: 1
]

You could use Array#filter and Array#map.
var arr = [{people:[{name:'sam',id:1},{name:'john',id:2}]},{people:[{name:'marry',id:1},{name:'paul',id:1}]}],
res = [].concat(...arr.map(v => v.people.filter(c => c.id == 1)));
console.log(res);

filter can certainly be part of the solution:
const people = [];
for (const obj of data) {
people.push(...obj.people.filter(p => p.id === 1));
}
const data = [
{
people: [
{
name: 'sam',
id: 1
},
{
name: 'john',
id: 2
}
]
},
{
people: [
{
name: 'marry',
id: 1
},
{
name: 'paul',
id: 1
}
]
}
];
const people = [];
for (const obj of data) {
people.push(...obj.people.filter(p => p.id === 1));
}
console.log(people);
.as-console-wrapper {
max-height: 100% !important;
}
(You could use data.forEach instead of the for-of loop if you prefer.)

You could use an ES5 approach with concatinating the filtered arrays.
var array = [{ people: [{ name: 'sam', id: 1 }, { name: 'john', id: 2 }] }, { people: [{ name: 'marry', id: 1 }, { name: 'paul', id: 1 }] }],
result = [].concat.apply([], array.map(function (a) {
return a.people.filter(function (p) {
return p.id === 1;
});
}));
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

Related

Compare two arrays of objects and merge some fields

I'm working with Angular and RxJs and I have two arrays of objects. I need to change one specific field of the first array, if the second one has the field with the same value (all of the four fields has different names). I did it with nested loops, but I need to find a better solution, my code is down below
My solution is working, but it's not the best, because arrays can be really large - so the code will work slow. If there's 1000 items in each array, it will be 1000000 iterations - that's why I need to find a better solution. I got advice to use multiple consecutive loops, but I don't really get how to use it here
this.api
.getFirstArray()
.pipe(
mergeMap((firstArray) =>
this._secondApi.getSecondArray().pipe(
map((secondArray) => {
for (const item2 of secondArray) {
for (const item1 of firstArray) {
if (item1.someField === item2.otherField)
item1.someOtherField = item2.anotherField;
}
}
return firstArray;
}),
),
),
)
.subscribe((value) => {
this.gridApi?.setRowData(value);
});
So for example my data is
firstArray: [
{ id: 445; name: 'test' },
{ id: 4355; name: 'test1' },
{ id: 234_234; name: 'test2' },
];
secondArray: [
{ firstName: 'test3'; newId: 445 },
{ firstName: 'test5'; newId: 2 },
{ firstName: 'test6'; newId: 234_234 },
];
And the result should be
result: [{ id: 445; name: 'test3' }, { id: 4355; name: 'test1' }, { id: 234_234; name: 'test6' }];
Note: the ids of the first array objects may be repeated - all of the objects names need to be updated
here is the working example of your problem, may be it will help you.
let firstArray = [
{ id: 445, name: 'test' },
{ id: 4355, name: 'test1' },
{ id: '234_234', name: 'test2' },
];
let secondArray = [
{ firstName: 'test3', newId: 445 },
{ firstName: 'test5', newId: 2 },
{ firstName: 'test6', newId: '234_234' },
];
secondArray.forEach(sec => {
let see = firstArray.findIndex(first => first.id === sec.newId);
if (see > -1) {
firstArray[see].name = sec.firstName
}
})
console.log(firstArray)
You still end up with O(N²) complexity (there are two nested loops that he wants to avoid).
Instead, You can use map
const firstArray = [
{ id: 445, name: 'test' },
{ id: 4355, name: 'test1' },
{ id: '234_234', name: 'test2' },
];
const secondArray = [
{ firstName: 'test3', newId: 445 },
{ firstName: 'test5', newId: 2 },
{ firstName: 'test6', newId: '234_234' },
];
const secondMap = new Map();
secondArray.forEach((item) => {
secondMap.set(item.newId, item.firstName);
});
for (const item of firstArray) {
if (secondMap.has(item.id)) {
item.name = secondMap.get(item.id);
}
}
console.log(firstArray)

Merge objects in array of object removing duplicates

I have this array of objects:
const a = [
{
id: 1,
name: 'John',
role: 'admin'
},
{
id: 1,
name: 'John',
role: 'user'
},
{
id: 2,
name: 'Max',
role: 'user'
}
]
I would like to have a result like this, so having one object for id:1 and a merged array in role property:
const a = [
{
id: 1,
name: 'John',
role: ['admin', 'user']
},
{
id: 2,
name: 'Max',
role: 'user'
}
]
EDIT:
I am able to remove duplicates when I have just to properties in the object. In my case I don't know how to retrieve the name property using the following snippet:
const b = [...new Set(a.map(d => d.id))].map(obj => {
return {
id: obj,
data: a.filter(d => d.id === obj).map(d => d.role)
}
})
You could take an object for grouping and use an array for additional roles.
const
data = [{ id: 1, name: 'John', role: 'admin' }, { id: 1, name: 'John', role: 'user' }, { id: 2, name: 'Max', role: 'user' }],
result = Object.values(data.reduce((r, o) => {
if (!r[o.id]) r[o.id] = { ...o };
else r[o.id].role = [].concat(r[o.id].role, o.role);
return r;
}, {}));
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
It can be done very simply with a reducer:
const a = [
{
id: 1,
name: 'John',
role: 'admin'
},
{
id: 1,
name: 'John',
role: 'user'
},
{
id: 2,
name: 'Max',
role: 'user'
}
]
const b = a.reduce((acc, el)=>{
const existingEl = acc.find(accEl=>accEl.id === el.id)
if(existingEl) existingEl.role.push(el.role)
// a very inelegant way of building a shallow copy with
// a bit of a data structure change
else acc.push({id: el.id, name: el.name, role:[el.role]})
return acc
}, [])
console.log(b)
give this a try
const a = [
{
id: 1,
name: 'John',
role: 'admin'
},
{
id: 1,
name: 'John',
role: 'user'
},
{
id: 2,
name: 'Max',
role: 'user'
}
]
const newArr = a.reduce((acc, val) => {
const findIndex = acc.findIndex(f => f.id === val.id);
if (findIndex > -1) {
if ((typeof acc[findIndex].role === 'string')) {
acc[findIndex].role = [acc[findIndex].role, val.role]
} else {
acc[findIndex].role.push(val.role)
}
} else {
acc.push(val)
}
return acc
}, []);
console.log(newArr)
You can iterate over each item in your input, storing its data on an object keyed by the item's id property. Using a Set to collect the roles during iteration ensures that no duplicates will exist in the end result:
function mergeRoles (users) {
const merged = {};
for (const {id, name, role} of users) {
(merged[id] ??= {id, name, role: new Set([role])}).role.add(role);
}
return Object.values(merged).map(user => ({...user, role: [...user.role]}));
}
const input = [
{ id: 1, name: 'John', role: 'admin' },
{ id: 1, name: 'John', role: 'user' },
{ id: 2, name: 'Max', role: 'user' },
];
const result = mergeRoles(input);
console.log(result);
For problems like this I usually turn the array into an object dictionary to merge all the duplicates, then convert the dictionary back to an array:
const a = [{
id: 1,
name: 'John',
role: 'admin'
},
{
id: 1,
name: 'John',
role: 'user'
},
{
id: 2,
name: 'Max',
role: 'user'
}
];
// Merge duplicates using object dictionary.
let itemsById = {};
for (let item of a) {
if (!itemsById[item.id]) {
// Id not seen yet.
item.role = [item.role];
itemsById[item.id] = item;
} else {
// Duplicate Id.
itemsById[item.id].role.push(item.role);
}
}
// Convert object dictionary back to array.
let newArray = [];
for (const id in itemsById) {
let item = itemsById[id];
if (item.role.length == 1) {
item.role = item.role[0];
}
newArray.push(item);
}
console.log(newArray);

Merge/Add an object into an array - Javscript

I have an two arrays of objects. My goal is to replace an object from the second array into the first one based upon 'id'. I have a working solution, but would like to extend it by adding the object to the first array if a value isnt found. Please advice.
function mergeById(arr) {
return {
with: function(arr2) {
return _.map(arr, item => {
return _.find(arr2, obj => obj.id === item.id) || item
})
}
}
}
var result = mergeById([{
id: '124',
name: 'qqq'
},
{
id: '589',
name: 'www'
},
{
id: '567',
name: 'rrr'
}
])
.with([{
id: '124',
name: 'ttt'
}, {
id: '45',
name: 'yyy'
}])
console.log(result);
/**
[
{
"id": "124",
"name": "ttt"
},
{
"id": "589",
"name": "www"
},
{
"id": "567",
"name": "rrr"
},
{
id: '45',
name: 'yyy'
}
]
**/
<script src="https://cdn.jsdelivr.net/npm/lodash#4.17.20/lodash.min.js"></script>
Please advice.
You need to filter the second array and add the values who have no common id.
function mergeById(arr) {
return {
with: function(arr2) {
return [
..._.map(arr, item => _.find(arr2, obj => obj.id === item.id) || item),
..._.filter(arr2, item => !_.some(arr, obj => obj.id === item.id))
];
}
}
}
var result = mergeById([{ id: '124', name: 'qqq' }, { id: '589', name: 'www' }, { id: '567', name: 'rrr' } ])
.with([{ id: '124', name: 'ttt' }, { id: '45', name: 'yyy' }]);
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
<script src="https://cdn.jsdelivr.net/npm/lodash#4.17.20/lodash.min.js"></script>
A shorter approach with a Map and single loops for every array.
function mergeById(array) {
const
add2map = (m, o) => m.set(o.id, o),
map = array.reduce(add2map, new Map);
return {
with: function(array2) {
return Array.from(array2
.reduce(add2map, map)
.values()
);
}
}
}
var result = mergeById([{ id: '124', name: 'qqq' }, { id: '589', name: 'www' }, { id: '567', name: 'rrr' } ])
.with([{ id: '124', name: 'ttt' }, { id: '45', name: 'yyy' }]);
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
Use _.differenceBy(arr2, arr, 'id') to find all items that appear in arr2 that doesn't have a counterpart in arr by id, and concat them to the results of the _.map() action.
Note: instead using _.find() (O(n)) on each iteration, iterate arr2 once with _.keyBy() (O(n)) to create a dictionary { [id]: item }, and then get the items in O(1).
const mergeById = arr => ({
with(arr2) {
const arr2Dict = _.keyBy(arr2, 'id')
return _.map(arr, item => arr2Dict[item.id] || item)
.concat(_.differenceBy(arr2, arr, 'id'))
}
})
const result = mergeById([{ id: '124', name: 'qqq' }, { id: '589', name: 'www' }, { id: '567', name: 'rrr' } ])
.with([{ id: '124', name: 'ttt' }, { id: '45', name: 'yyy' }])
console.log(result)
<script src="https://cdn.jsdelivr.net/npm/lodash#4.17.20/lodash.min.js"></script>
You can replace/add in a single loop by concating both arrays, reducing to a Map, and just adding the items by id to the Map:
const mergeById = arr => ({
with(arr2) {
return Array.from(
[...arr, ...arr2]
.reduce((r, o) => r.set(o.id, o), new Map)
.values()
)
}
})
const result = mergeById([{ id: '124', name: 'qqq' }, { id: '589', name: 'www' }, { id: '567', name: 'rrr' } ])
.with([{ id: '124', name: 'ttt' }, { id: '45', name: 'yyy' }])
console.log(result)
<script src="https://cdn.jsdelivr.net/npm/lodash#4.17.20/lodash.min.js"></script>

Filter nested object and keep parents

I want to search an nested object by values of property 'name' and the result will keep its all parents.
For example,
const object = [
{
name: 'Mary',
children: [
{
name: 'Jack',
},
{
name: 'Kevin',
children: [
{
name: 'Lisa',
}
]
}
]
},
{
name: 'Gina',
children: [
{
name: 'Jack',
}
]
}
]
If I search 'Mary', it should be return:
[
{
name: 'Mary',
}
]
If I search 'Jack', it should be return:
[
{
name: 'Mary',
children: [
{
name: 'Jack',
}
]
},
{
name: 'Gina',
children: [
{
name: 'Jack',
}
]
}
]
If I search 'Lisa', it should be return:
[
{
name: 'Mary',
children: [
{
name: 'Jack',
children: [
{
name: 'Lisa',
}
]
}
]
}
]
I tried some methods but I could only filter two layer. As below:
return object.filter(data => {
if (data.children) {
return data.name.includes(keyword) || data.children.find(item => item.name.includes(keyword));
}
return data.name.includes(keyword);
})
Could someone point me in the right direction? Thanks!
You could build an object and if nested, check the children and create the parents, if necessary.
function getObjects(array, target) {
return array.reduce((r, { name, children = [] }) => {
if (name === target) {
r.push({ name });
return r;
}
children = getObjects(children, target);
if (children.length) {
r.push({ name, children })
}
return r;
}, []);
}
var data = [{ name: 'Mary', children: [{ name: 'Jack' }, { name: 'Kevin', children: [{ name: 'Lisa' }] }] }, { name: 'Gina', children: [{ name: 'Jack' }] }];
console.log(getObjects(data, 'Mary'));
console.log(getObjects(data, 'Jack'));
console.log(getObjects(data, 'Lisa'));
.as-console-wrapper { max-height: 100% !important; top: 0; }
Here is an example of a depth-first approach:
function searchWithParents(tree, query) {
let results = [];
for (const {name, children} of tree) {
if (name === query) {
results.push({name});
}
if (children) {
const subtreeResults = searchWithParents(children, query);
const mappedResults = subtreeResults.map(child => ({name, children: [child]}))
results = results.concat(mappedResults);
}
}
return results;
}
console.log(searchWithParents(object, 'Mary'));
console.log(searchWithParents(object, 'Jack'));
console.log(searchWithParents(object, 'Lisa'));

How to merge and return new array from object in es6

Suppose there are two objects.
const a = [
{ id: '1-1-1', name: 'a111' },
{ id: '1-1-2', name: 'a112' },
{ id: '1-2-1', name: 'a121' },
{ id: '1-2-2', name: 'a122' },
{ id: '2-1-1', name: 'a211' },
{ id: '2-1-2', name: 'a212' }
]
const b = ['1-1', '1-2', '2-1']
and the result
{
'1-1':[
{ id: '1-1-1', name: 'a111' },
{ id: '1-1-2', name: 'a112' },
],
'1-2':[
{ id: '1-2-1', name: 'a121' },
{ id: '1-2-2', name: 'a122' },
],
'2-1':[
{ id: '2-1-1', name: 'a211' },
{ id: '2-1-2', name: 'a212' },
]
}
Basically, I want to group the data.
I use includes to check if the item from b to match the id from a. Then construct the new array.
This is my attempt(fiddle):
return b.map(item => a.map(jtem => {
if(jtem.id.includes(item)){
return {
[item]: jtem
}
}
}))
For somehow, it doesn't work.
and, is there a clever way to avoid the nested for loop or map function?
You can do that in following steps:
Apply reduce() on the array b
During each iteration use filter() on the the array a
Get all the items from a which starts with item of b using String.prototype.startsWith()
At last set it as property of the ac and return ac
const a = [
{ id: '1-1-1', name: 'a111' },
{ id: '1-1-2', name: 'a112' },
{ id: '1-2-1', name: 'a121' },
{ id: '1-2-2', name: 'a122' },
{ id: '2-1-1', name: 'a211' },
{ id: '2-1-2', name: 'a212' }
]
const b = ['1-1', '1-2', '2-1']
let res = b.reduce((ac,b) => {
ac[b] = a.filter(x => x.id.startsWith(b));
return ac;
},{})
console.log(res)
As suggested by #Falco is the comments that It would be better to scan over the a once as its large. So here is that version.Actually its better regarding performance
const a = [
{ id: '1-1-1', name: 'a111' },
{ id: '1-1-2', name: 'a112' },
{ id: '1-2-1', name: 'a121' },
{ id: '1-2-2', name: 'a122' },
{ id: '2-1-1', name: 'a211' },
{ id: '2-1-2', name: 'a212' }
]
const b = ['1-1', '1-2', '2-1']
let res = a.reduce((ac,x) => {
let temp = b.find(y => x.id.startsWith(y))
if(!ac[temp]) ac[temp] = [];
ac[temp].push(x);
return ac;
},{})
console.log(res)
Note: startsWith is not supported by I.E. So you can create polyfill using indexOf
if(!String.prototype.startWith){
String.prototype.startsWith = function(str){
return this.indexOf(str) === 0
}
}

Categories