Filtering JavaScript Array with complex object type

There is a always need to filter an array in Angular, react, vue, or any JavaScript language. And some times many developers did a multiple for loop to get the right value. JavaScript arrays have a filter method, which returns a specific array that is needed. There are some complex scenarios, where we can use multiple javascript features to get the right value for us.

Simple array.filter() method

Let's say we have an array of string and trying to get a simple value return from the array.

const alphaDataSource = ['a', 'b', 'c', 'd', 'e'];

const filterArray = alphaDataSource.filter(i => i === 'c');

console.log('Value: ', filterArray); // ['c']

Let's do the same with some object

const alphaDataSource = [{ pos: 1, value: 'a' }, { pos: 2, value: 'b' }, { pos: 3, value: 'c' }];

const filterArray = alphaDataSource.filter(i => i.value === 'c');

console.log('Value: ', filterArray); // [{ pos: 3, value: 'c' }]

Now Filter unique JSON Object from Array of Objects

There are some possibilities, to get only unique objects out of some data sources which may have duplicate objects. Something like that -

objectDataSource: [ {id: 1, name: 'Roni', roll: '123'}, {id: 2, name: 'Bob', roll: '456'}, {id: 3, name: 'Jhon', roll: '789'}, {id: 2, name: 'Bob', roll: '456'}, ---> same (want to remove) {id: 3, name: 'Jhon', roll: '789'}, ---> same (want to remove) ],

const uniqueArray = a => [...new Set(a.map(o => JSON.stringify(o)))].map((s) => JSON.parse(s))

console.log('value: ', uniqueArray(objectDataSource)) //get the uniqueArray. (see the example below - filter 2)

Also, there are some situations, that we want to filter based on some property value of the Object.

Let's say, we have a list of unique objects, but some locations or names is repetitive. Our wish is to get a unique array with some specific property within the object. Like - "get all objects based on names."

personDataSource: [ {id: 1, name: 'Roni', roll: '123'}, {id: 2, name: 'Bob', roll: '456'}, {id: 3, name: 'Roni', roll: '789'}, ---> want to remove {id: 4, name: 'Molly', roll: '101'}, {id: 5, name: 'Jolly', roll: '765'}, {id: 6, name: 'Molly', roll: '456'}, ---> want to remove {id: 7, name: 'Molly', roll: '767'}, ---> want to remove {id: 8, name: 'Molly', roll: '99'}, ---> want to remove {id: 9, name: 'Bob', roll: '11'}, {id: 10, name: 'Polly', roll: '34'} ],

const uniqueArrayByProperty = (a, propertyName) => { return Array.from(new Set(a.map(i => i[propertyName]))).map(j => { return a.find(k => k[propertyName] === j) }) }

console.log('value: ', uniqueArrayByProperty(personDataSource, 'name'))

Example:

There are one more library called lodash (_) https://www.npmjs.com/package/lodash can be used to filter out array of data set according to our needs. More details can be found - https://lodash.com/docs/4.17.15#filter

Let me know if you have any other complex scenario, please share. Happy Coding!

- LP