Combine values within a single property of an object using the reduce method

Question

Combine values within a single property of an object using the reduce method

My array consists of objects structured like this:

let array = [{
    "Age": 20,
    "Name": "Kevin"
}, {
    "Age": 15,
    "Name": "Alfred"
}, {
    "Age": 30,
    "Name": "Joe"
}];

I am aiming to transform it into an object with combined values like this:

{
    "Age": '20, 15, 30',
    "Name": 'Kevin, Alfred, Joe'
}

When attempting the following reduce function:

let r = array.reduce(function(pV, cV) {
    Object.keys(cV).map(function(key){
        pV[key] = (pV[key] || [])concat(cV[key]);
    });
    return pV;
},{});

console.log(r); // { "Age": [20, 15, 30], "Name": ['Kevin', 'Alfred', 'Joe'] }

Alternatively, I tried another approach:

let r = array.reduce(function(pV, cV) {
    Object.keys(cV).map(function(key){
        pV[key] = (pV[key] || '') + ', ' + cV[key];
    });
    return pV;
},{});

console.log(r); // { "Age": ', 20, 15, 30', "Name": ', Kevin, Alfred, Joe' }

I'm uncertain which method will give me the desired outcome. Any suggestions on how to achieve my goal?

javascript arrays object

Answer 1

Answer №1

Your second approach is almost there, just remember to ensure that the comma does not show up initially. You can easily achieve this using a ternary operator:

let result = array.reduce(function(previousValue, currentValue) {
  Object.keys(currentValue).map(function(key){
      previousValue[key] = (previousValue[key] ? (previousValue[key] + ", ") :  '') + currentValue[key];
  });
  return previousValue;
},{});

Answer 2

Your second approach is almost there, just remember to ensure that the comma does not show up initially. You can easily achieve this using a ternary operator:

let result = array.reduce(function(previousValue, currentValue) {
  Object.keys(currentValue).map(function(key){
      previousValue[key] = (previousValue[key] ? (previousValue[key] + ", ") :  '') + currentValue[key];
  });
  return previousValue;
},{});

Answer 3

Answer №2

If you want to explore an interesting approach, consider using the .reduce() function in conjunction with Object.keys

let products = [{
    "Price": 50,
    "Name": "Shoes"
}, {
    "Price": 30,
    "Name": "Hat"
}, {
    "Price": 100,
    "Name": "Jacket"
}];

let finalResult = products.reduce((currentProduct,resultingProduct) => {
Object.keys(currentProduct).forEach(key => {
if(!resultingProduct[key]){
resultingProduct[key] = currentProduct[key];
} else {
resultingProduct[key]+= ", " + currentProduct[key];
}
})
return resultingProduct;
},{});

console.log(finalResult);

Answer 4

If you want to explore an interesting approach, consider using the .reduce() function in conjunction with Object.keys

let products = [{
    "Price": 50,
    "Name": "Shoes"
}, {
    "Price": 30,
    "Name": "Hat"
}, {
    "Price": 100,
    "Name": "Jacket"
}];

let finalResult = products.reduce((currentProduct,resultingProduct) => {
Object.keys(currentProduct).forEach(key => {
if(!resultingProduct[key]){
resultingProduct[key] = currentProduct[key];
} else {
resultingProduct[key]+= ", " + currentProduct[key];
}
})
return resultingProduct;
},{});

console.log(finalResult);

Answer 5

Answer №3

In my opinion, I find the use of `reduce` in this context to be unnecessary as it essentially functions as a loop:

let result = {};
for (const currentValue of array) {
    for (const key in currentValue) {
        result[key] = (result[key] || []).concat(currentValue[key]);
    }
}

If we were to take a more functional approach and utilize `map` effectively, I would reverse the order of iteration like so:

let result = {};
for (const key of ["Age", "Name"]) { // or Object.keys(array[0])
    result[key] = array.map(function(currentValue){
        return currentValue[key];
    }).join(", ");
}

Answer 6

In my opinion, I find the use of `reduce` in this context to be unnecessary as it essentially functions as a loop:

let result = {};
for (const currentValue of array) {
    for (const key in currentValue) {
        result[key] = (result[key] || []).concat(currentValue[key]);
    }
}

If we were to take a more functional approach and utilize `map` effectively, I would reverse the order of iteration like so:

let result = {};
for (const key of ["Age", "Name"]) { // or Object.keys(array[0])
    result[key] = array.map(function(currentValue){
        return currentValue[key];
    }).join(", ");
}

Answer 7

Answer №4

Another approach you can take is as follows.

 array.reduce((a,n)=>{
 a.Age =  a.Age+','+n.Age;
a.Name = a.Name+','+n.Name;
return a;
});

Please note that this method will modify the actual array of objects. If this is not your intention, consider cloning the object before using reduce.

To clone the array, I used

JSON.parse(JSON.stringify(array))

, but feel free to use your preferred method for deep cloning.

JSON.parse(JSON.stringify(array)).reduce((a,n)=>{
 a.Age =  a.Age+', '+n.Age;
a.Name = a.Name+', '+n.Name;
return a;
})

Answer 8

Another approach you can take is as follows.

 array.reduce((a,n)=>{
 a.Age =  a.Age+','+n.Age;
a.Name = a.Name+','+n.Name;
return a;
});

Please note that this method will modify the actual array of objects. If this is not your intention, consider cloning the object before using reduce.

To clone the array, I used

JSON.parse(JSON.stringify(array))

, but feel free to use your preferred method for deep cloning.

JSON.parse(JSON.stringify(array)).reduce((a,n)=>{
 a.Age =  a.Age+', '+n.Age;
a.Name = a.Name+', '+n.Name;
return a;
})

Combine values within a single property of an object using the reduce method

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Ways to delete a class if it currently exists?

Using jQuery to show text upon hover using a `for` loop

Running a function exclusively within a single div using Angular 2

Inaccurate Feedback on Maquest Direction Route API

scrolling through a list using .slice choosing an excessive amount of items

Prevent legend strike-through on click in Vue Chart.js

How can I generate dynamic JSON objects from arrays in a spreadsheet by looping through and filtering out any empty values

Accessing a specific child div within a parent div using JavaScript and CSS

Implement a customized toString method for components in ReactJS

Throw an error if the entry is not found in the Firebase database

If the visitor navigated from a different page within the site, then take one course of action; otherwise

Error encountered by React context: TypeError - Attempting to iterate over an object that is not iterable (unable to access property

Difficulties arising when trying to convert latitude and longitude coordinates to xyz for camera rotation within Three.js

Vue for Number Crunching

Prevent the mouseup event in jQuery when the mouse has previously been moved

Please tap to dial: Access to navigation is restricted

Browserify pulls in entire module even if only specific parts are utilized, such as react-addons

Prevent the submission of the form if the textfield does not contain any

Customize your popover content with Bootstrap settings

Issue with webcomponents-lite.js file