Combine array elements in Angular/Javascript based on a certain condition

Question

Combine array elements in Angular/Javascript based on a certain condition

Is there a way to combine elements from two arrays while avoiding duplicates?

array = [
  {id: 1, name:'abc'},{id: 1, name:'xyz'},{id: 2, name:'text1'},{id: 2, name:'text2'}
];

The desired output is:

result = [{id: 1, name:'abc OR xyz'},{id: 2, name:'text1 OR text2'}];

If the ids are the same, the name strings should be concatenated with 'OR'. How can this be achieved using Angular or JavaScript functions? Can it be done using the array.reduce() function? If so, how would that look like? Or do I have to resort to using a for loop?

javascript arrays angular typescript

Answer 1

Answer №1

To group the items by their id, you can utilize the Array.reduce() method in JavaScript.

This approach will create an object with a property for each unique id, and then you can extract the grouped result using Object.values() to obtain it as an array.

const array = [{id: 1, name:'abc'},{id: 1, name:'xyz'},{id: 2, name:'text1'},{id: 2, name:'text2'}];

const result = Object.values(array.reduce((acc, { id, name }) => { 
    if (!acc[id]) {
        acc[id] = { id, name };
    } else { 
        acc[id].name += ' OR ' + name;
    }
    return acc;
}, {}))

console.log('Result:', result)

.as-console-wrapper { max-height: 100% !important; }

An alternative way is to achieve the same outcome using a for...of loop:

const array = [{id: 1, name:'abc'},{id: 1, name:'xyz'},{id: 2, name:'text1'},{id: 2, name:'text2'}];

const map = {};

for(let { id, name } of array) {
    if (!map[id]) { 
        map[id] = { id, name };
    } else { 
        map[id].name += ' OR ' + name;
    }
}

const result = Object.values(map);
console.log('Result:', result)

.as-console-wrapper { max-height: 100% !important; }

Answer 2

To group the items by their id, you can utilize the Array.reduce() method in JavaScript.

This approach will create an object with a property for each unique id, and then you can extract the grouped result using Object.values() to obtain it as an array.

const array = [{id: 1, name:'abc'},{id: 1, name:'xyz'},{id: 2, name:'text1'},{id: 2, name:'text2'}];

const result = Object.values(array.reduce((acc, { id, name }) => { 
    if (!acc[id]) {
        acc[id] = { id, name };
    } else { 
        acc[id].name += ' OR ' + name;
    }
    return acc;
}, {}))

console.log('Result:', result)

.as-console-wrapper { max-height: 100% !important; }

An alternative way is to achieve the same outcome using a for...of loop:

const array = [{id: 1, name:'abc'},{id: 1, name:'xyz'},{id: 2, name:'text1'},{id: 2, name:'text2'}];

const map = {};

for(let { id, name } of array) {
    if (!map[id]) { 
        map[id] = { id, name };
    } else { 
        map[id].name += ' OR ' + name;
    }
}

const result = Object.values(map);
console.log('Result:', result)

.as-console-wrapper { max-height: 100% !important; }

Answer 3

Answer №2

Completing this task is quite simple. What methods have you attempted previously? There are numerous approaches to accomplishing this goal.

Below is a brief snippet of pseudo code I put together to guide you:

result = []
idsFound = []

//Iterate through all elements in the input array
for x = 0, x < array.length, x++
    element = array[x]
    
    //Check if ID has already been processed
    if idsFound.indexOf(element.id) !== -1:
        continue
    
    //Iterate through upcoming elements
    for y = x + 1, y < array.length, y++
        other_element = array[y]
        
        //Verify if IDs match
        if other_element.id === element.id:
            //Add name information
            element.name += ' OR ' + other_element.name
    
    //Add element and ID to result arrays
    result.push(element)
    idsFound.push(element.id)

Answer 4

Completing this task is quite simple. What methods have you attempted previously? There are numerous approaches to accomplishing this goal.

Below is a brief snippet of pseudo code I put together to guide you:

result = []
idsFound = []

//Iterate through all elements in the input array
for x = 0, x < array.length, x++
    element = array[x]
    
    //Check if ID has already been processed
    if idsFound.indexOf(element.id) !== -1:
        continue
    
    //Iterate through upcoming elements
    for y = x + 1, y < array.length, y++
        other_element = array[y]
        
        //Verify if IDs match
        if other_element.id === element.id:
            //Add name information
            element.name += ' OR ' + other_element.name
    
    //Add element and ID to result arrays
    result.push(element)
    idsFound.push(element.id)

Combine array elements in Angular/Javascript based on a certain condition

Answer №1

Answer №2

Similar questions

Prevent form submission with jQuery during validation process

Issue with Angular-cli: typescript files not being generated when using the --dev option

What are the steps to utilizing an npm package that simply encapsulates my JavaScript code?

Separate PHP variables from a MySQL array by splitting them

playing with JSON data in angular

Incorporating responsive design with React and Typescript

Enhance the table using Django URL tag along with JQuery

Exploring Composite Types with TypeScript's `infer` Keyword

Customizing error styles in a table using Jquery validation

Why should one bother with specifying types when defining a variable in Typescript?

Can README docs be prioritized to appear before all other stories in Storybook navigation?

Having trouble with JSON search not functioning as expected in Select2 4.0?

Issue with Firefox-Android causing dropdown toggle to malfunction

When I apply filtering and grouping to the table, the rows in the mat table disappear

Creating a dropdown menu using Vue.js

The error message "Unexpected TypeError: useSearchParams either does not exist as a function or is not iterable in its return value

The AngularJS directive "ng-include" is used to dynamically

How to parse JSON in JavaScript/jQuery while preserving the original order

Operating with a multidimensional entity

The dropdown height feature is experiencing issues in the Chrome browser