Array handling in Javascript or in Angular
Without having business logic for any application, is good for nothing. And to handle business logic you definitely need to handle the different states of an object or array of objects. You might need to sort, filter get min, max or unique value from an array of objects.
In this blog, I am going to discuss on few real-life array handling scenario, such as -
-
Sorting an array based on a particular object property value (Ascending & Descending)
-
Filtering objects from two different array
-
Find Min & Max value from an array
Every application needs to fulfill its business logic, and for that, it needs to manipulate or compute collections of data for representation. To handle data properly, we need to depend on different data structures like Array, Stack, Queue, Linked List, Doubly Linked List, Circular Linked List, Circular Queue, and so on. But the underneath of the main data structure is an Array.
Here, I am going to experiment with different scenarios with different collections of data to sort, compare, min value, max value, and whatnot.
How to sort (Ascending Or Descending) an array based on created date or any other specific Object property
Let's say, we have a multiple Account object in Account collection, like below -
 |
{
"accounts": [
{
"account_holder_name": "Rinki",
"account_id": 100,
"account_type": "savings",
"bank_name": "SBI",
"created_date": "2020-02-14T07:23:25.0662629Z"
},
{
"account_holder_name": "Manisha",
"account_id": 101,
"account_type": "savings",
"bank_name": "SBI",
"created_date": "2020-02-14T03:20:25.0662629Z"
}, ....more
]
}
|
So, to sort the collection, you can use the following code snippets to get actual results in ascending or descending order -
// sorting
sortDataSource(data: Array<any>): Array<any> {
return data.sort((a, b) => {
return (new Date(b.created_date) as any) - (new Date(a.created_date) as any);
});
}
How to compare two arrays of objects in javaScript
Consider a scenario, when you have master accounts and child accounts. Now you want to differentiate only those accounts which are present in the master data set.
| Master Data set |
Child Data set |
 |
 |
To filter out only those specific objects from the master array, the following code needs to be executed.
findOnlyAccountsfromMasterArray(): Array<any> {
const filterDataArray = this.accountsObject.accounts.filter(mItem => {
return !this.childAccountsObject.accounts.some(cItem => {
return mItem.account_id === cItem.account_id;
});
});
return filterDataArray;
}
The same if you want to filter elements that are only present in the child array, you need to interchange the inner array to upper and upper array to inner array. Like below -
findOnlyAccountsfromChildArray(): Array<any> {
const filterDataArray = this.childAccountsObject.accounts.filter(cItem => {
return !this.accountsObject.accounts.some(mItem => {
return cItem.account_id === mItem.account_id;
});
});
return filterDataArray;
}
Filter object from a collection based on Minimum & Maximum value
Consider you have a list of objects (i.e. List of account object) and now you wanted to filter only such object which is having a minimum balance in the account.
To find out the minimum & maximum value from the account collection, use the following code snippets -
// Minimum
findMinimumBalanceAccount(): any {
const minValue = Math.min.apply(Math, this.accountsObject.accounts.map(mItem => {
return mItem.balance;
}));
return minValue;
}
// Maximum
findMaximumBalanceAccount(): any {
const maxValue = Math.max.apply(Math, this.accountsObject.accounts.map(mItem => {
return mItem.balance;
}));
return maxValue;
}
Demo Time:
How to Get Unique Elements from an Array of Objects
To get unique Array elements only, you can use Set to filter out objects. Here how I am getting it.
uniqueArray = a => [...new Set(a.map(o => JSON.stringify(o)))].map((s: any) => JSON.parse(s));
How to use Array.reduce() method
Reduce method executes a callback function that we provide on each element stored in an array and outputs the final value the operation generates. It’s a cleaner way of iterating over and processing the data stored in an array.
[1, 2, 3, 4].reduce((previousValue, currentValue) => previousValue + currentValue)
// Output = 10
Another Simple Example -
const numbers = [2, 4, 6];
const sum = numbers.reduce((sum, number) => {
const updatedSum = sum + number;
return updatedSum;
}, 0);
console.log("sum:", sum); // Output 12
Please share your comments below and let me know if you are facing any different types of challenges using an array.
Happy Coding!
Loading comments...