
- Javascript Basics Tutorial
- Javascript - Home
- Javascript - Overview
- Javascript - Syntax
- Javascript - Enabling
- Javascript - Placement
- Javascript - Variables
- Javascript - Operators
- Javascript - If...Else
- Javascript - Switch Case
- Javascript - While Loop
- Javascript - For Loop
- Javascript - For...in
- Javascript - Loop Control
- Javascript - Functions
- Javascript - Events
- Javascript - Cookies
- Javascript - Page Redirect
- Javascript - Dialog Boxes
- Javascript - Void Keyword
- Javascript - Page Printing
- JavaScript Objects
- Javascript - Objects
- Javascript - Number
- Javascript - Boolean
- Javascript - Strings
- Javascript - Arrays
- Javascript - Date
- Javascript - Math
- Javascript - RegExp
- Javascript - HTML DOM
- JavaScript Advanced
- Javascript - Error Handling
- Javascript - Validations
- Javascript - Animation
- Javascript - Multimedia
- Javascript - Debugging
- Javascript - Image Map
- Javascript - Browsers
- JavaScript Useful Resources
- Javascript - Questions And Answers
- Javascript - Quick Guide
- Javascript - Functions
- Javascript - Resources
How to reduce an array while merging one of its field as well in JavaScript
Consider, we have the following array of objects −
const arr = [{ id: 121, hobby: 'cycling' }, { id: 125, hobby: 'jogging' }, { id: 129, hobby: 'reading' }, { id: 121, hobby: 'writing' }, { id: 121, hobby: 'playing football' }, { id: 125, hobby: 'cooking' }, { id: 129, hobby: 'horse riding' }];
Let’s say, we have to write a function that takes in such an array and merges it based on the common id property, and for the hobby property we assign it an array and put all hobbies for specific ids in there.
We will use the Array.prototype.reduce() method to iterate over the array and merge entries with the same indices at the same time.
The code for doing this will be −
Example
const arr = [{ id: 121, hobby: 'cycling' }, { id: 125, hobby: 'jogging' }, { id: 129, hobby: 'reading' }, { id: 121, hobby: 'writing' }, { id: 121, hobby: 'playing football' }, { id: 125, hobby: 'cooking' }, { id: 129, hobby: 'horse riding' }]; const mergeArray = (arr) => { return arr.reduce((acc, val) => { const ind = acc.findIndex(item => item.id === val.id); if(ind !== -1){ acc[ind].hobby.push(val.hobby); }else{ acc.push({ id: val.id,hobby: [val.hobby] }); }; return acc; }, []); }; console.log(mergeArray(arr));
Output
The output in the console will be −
[ { id: 121, hobby: [ 'cycling', 'writing', 'playing football' ] }, { id: 125, hobby: [ 'jogging', 'cooking' ] }, { id: 129, hobby: [ 'reading', 'horse riding' ] } ]
- Related Articles
- Reduce an array to groups in JavaScript
- Merging two sorted arrays into one sorted array using JavaScript
- Reduce array in JavaScript
- Reduce an array to the sum of every nth element - JavaScript
- JavaScript Auto-filling one field same as other
- Merging nested arrays to form 1-d array in JavaScript
- Encoding string to reduce its size in JavaScript
- Merging boolean array with AND operator - JavaScript
- Java regular expression program to validate an email including blank field valid as well
- How to convert array into array of objects using map() and reduce() in JavaScript
- Comparing forEach() and reduce() for summing an array of numbers in JavaScript.
- Merging subarrays in JavaScript
- Sorting Array with JavaScript reduce function - JavaScript
- How to autofill a field in JavaScript same as another?
- How to reduce arrays in JavaScript?

Advertisements