What is the best way to combine an array of objects by matching property values?

Question

What is the best way to combine an array of objects by matching property values?

I'm facing an issue that involves working with an array of objects and adding their values where the dates are equal.

Here is the initial array:

0: {date: "07-04-2020", value: 10}
1: {date: "10-04-2020", value: 20}
2: {date: "07-04-2020", value: 30}
3: {date: "14-04-2020", value: 60}

The expected result should be:

0: {date: "07-04-2020", value: 40}
1: {date: "10-04-2020", value: 20}
3: {date: "14-04-2020", value: 60}

Despite trying various higher order functions like filter, map, and reduce, I am still unable to solve this problem.

javascript arrays object

Answer 1

Answer №1

An alternative approach is to utilize the Array.reduce method:

[...].reduce((accumulator, currentValue) => {
  // Search for an item with the same date
  const existingItem = accumulator.find(item => item.date === currentValue.date);
  // If not found, add the new item to the array
  if (!existingItem) {
    return [...accumulator, currentValue];
  }
  // If found, update the value property and return the array
  existingItem.value += currentValue.value;
  return accumulator;
}, []);

Answer 2

An alternative approach is to utilize the Array.reduce method:

[...].reduce((accumulator, currentValue) => {
  // Search for an item with the same date
  const existingItem = accumulator.find(item => item.date === currentValue.date);
  // If not found, add the new item to the array
  if (!existingItem) {
    return [...accumulator, currentValue];
  }
  // If found, update the value property and return the array
  existingItem.value += currentValue.value;
  return accumulator;
}, []);

Answer 3

Answer №2

Do you think this solution will meet your needs?

let arrayOfObjects = [{
    date: "07-04-2020",
    value: 10
  },
  {
    date: "10-04-2020",
    value: 20
  },
  {
    date: "07-04-2020",
    value: 30
  },
  {
    date: "14-04-2020",
    value: 60
  },
]

function sumValuesWithSameDate(arr) {
  let resultArr = [];
  let tempObj = {};

  arr.forEach((row) => {
    tempObj[row.date] = tempObj[row.date] ? tempObj[row.date] + row.value : row.value;
  });

  Object.entries(tempObj).forEach((dateValue) => {
    resultArr.push({
      date: dateValue[0],
      value: dateValue[1]
    });
  });

  return resultArr;
}
console.log(sumValuesWithSameDate(arrayOfObjects));

Answer 4

Do you think this solution will meet your needs?

let arrayOfObjects = [{
    date: "07-04-2020",
    value: 10
  },
  {
    date: "10-04-2020",
    value: 20
  },
  {
    date: "07-04-2020",
    value: 30
  },
  {
    date: "14-04-2020",
    value: 60
  },
]

function sumValuesWithSameDate(arr) {
  let resultArr = [];
  let tempObj = {};

  arr.forEach((row) => {
    tempObj[row.date] = tempObj[row.date] ? tempObj[row.date] + row.value : row.value;
  });

  Object.entries(tempObj).forEach((dateValue) => {
    resultArr.push({
      date: dateValue[0],
      value: dateValue[1]
    });
  });

  return resultArr;
}
console.log(sumValuesWithSameDate(arrayOfObjects));

What is the best way to combine an array of objects by matching property values?

Answer №1

Answer №2

Similar questions

Error: The request from http://localhost:8383 to AngularJS MySQL REST API is being blocked due to Access-Control-Allow-Origin policy

The ComponentDidUpdate function treats the previous state (prevState) and the current state (this

Creating a list of elements in an array without assigning it a name

Tips for effectively reusing the modal component in Vue.js without encountering re-render issues

Retrieving multiple data using jQuery's ajax functionality

Is It Best to Override Behavior in a Directive?

Having trouble with the jQuery function not working as expected? Can't seem to identify any errors in the code?

Interpret an item based on its specific axis in that location

Express.js using GET request to retrieve all data entries from the database

Populate a vacant buffer in C++ with a specific value

The first Ajax call was successful, but the second Ajax call was unexpectedly sent twice

Aligning the content in the center of a div with inline display

"Clicking on a link inside a div element using the onclick

Retrieve both the keys and values from a deeply nested JSON object

unable to activate toggleclass('d-block') for multiple radio inputs

React - Clearing State data retrieved from axios request

Using AngularJS, rearrange the text in a text area

What is the reason behind Rxjs switchMap only emitting the final value from an of() observable source?

What is the best way to connect to a JSON key that is consistently returned with a varying or unpredictable name?

Rhythmic foliage icon created with dynamic CSS3 animations