Hopefully this would be the satisfied topic you will see today because am pretty sure that people whoever gathered here have must faced the tragedy of handling ‘N’ number of codes in application. Though its not a good practice to write bulk codes for an application but sometimes we ought to come up with lengthy codes even for the small logic and also it will affect the performance of an application. Earlier, when i start my career even i did the same mistake but when the time passes by i realized that writing a clear short code is much required skill for any developers than developing an application. So on the process of acquiring strong knowledge in writing short codes, i have found some simple yet useful tips which can save hell lot of time from writing codes for 1000 pages. Today am planning to share those simple steps to simplify the bulk code using typescript Array.
Though we have more methods to discuss but to put it short, i have explained the two main methods we developers must know,
1 .map()
2 .filter()

Let me explain each with sample code

const array_1 = [
   {
     id: 1,
     name: "john",
     year: 16,
     result: true
   },
   {
     id: 2,
     name: "david",
     year: 20,
     result: true
   },
   {
     id: 3,
     name: "mani",
     year: 20,
     result: false
   },
   {
     id: 4,
     name: "paul",
     year: 16,
     result: false
   }
];

Filter

The .filter() method will accept a callback function, using that callback function we can individually examine the each element of the array and also we can return the elements based on the conditions.
Now will see how to split two array using year key from the above example, one is year 16 another one year 20 using .filter()
const year16 = array_1 .filter(data => data.year === 16);
const year20 = array_1 .filter(data => data.year === 20);
You could clearly see how the array got splitted into two different array without using any methods like forEach or for..loop.
Year16 = [{id: 1, name: “john”, year: 16, result: true},{id: 4, name: “paul”, year: 16, result: false}]
Year20 = [{id: 2, name: “david”, year: 20, result: true},{id: 3, name: “mani”, year: 20, result: false}]

Related: Dynamic Import Expressions In Angular Using TypeScript

How to call the function using .filter()

Using .filter() now you can call the function and get back the array. For example, below function is have used the call function to get the biggest numbers greater than 10.

const getBigNumber = [3, 5, 10, 100, 64].filter(this.isBignumber);
isBignumber(element, index, array) {
return (element >= 10);
}

 
Result

[10, 100, 64]

Best To Read: How to make Angular Application SEO Friendly Using Pre Render

 

.map

.map() method will create a new array using an every single element from the existing array.
Next, we need to create an array containing the id of whose result is true using .map().

const resultId = [];
const result = Array1.map(data => {
if (data.result === true) {
resultId.push(data.id);
}
});

 
You can see the separated array below,
[1,2]
.map() function also used to get the string using .join() with the array element
On the below code i have added the name with comma separated.

const name = Array1.map(data => data.name).join(',');

 
so we got the following string as an output

john,david,mani,paul

 
Liked it? Similarly find more informative blogs on our largest blog repository, Stay updated with latest topics & tricks and don’t forget to subscribe us to get the latest updates from diverse technologies. Besides all, post us your valuable thoughts in the comment section. For any queries reach us via info@agiratech.com.