Combining multiple objects in an array to create a single object with the aggregated sum value can be achieved using JavaScript

Question

Combining multiple objects in an array to create a single object with the aggregated sum value can be achieved using JavaScript

I am working with an array that contains numbers of array objects, and I need to merge these arrays into a single array with unique values for content and the sum of values for total as shown in the desired result below. Any assistance would be greatly appreciated.

Result Set

[
  [
    {
      content: 'Aqurie',
      total: 5
    },
    {
      content: 'Mail function',
      total: 4
    }
  ],
  [
    {
      content: 'Aqurie',
      total: 4
    },
    {
      content: 'Mail function',
      total: 10
    }
  ]
]

Desired Result

[
  {
    content: 'Aqurie',
    total: 9
  },
  {
    content: 'Mail function',
    total: 14
  }
]

My current approach to achieving this is:

var transformed = arr.reduce(function(a, b){ return a.concat(b); });
console.log(transformed);

javascript arrays object merge sum

Answer 1

Answer №1

If the order of elements in the nested arrays remains the same, you can use the following method:

var arr = [
  [{
    content: 'Aqurie',
    total: 5
  }, {
    content: 'Mail function',
    total: 4
  }],
  [{
    content: 'Aqurie',
    total: 4
  }, {
    content: 'Mail function',
    total: 10
  }]
];

// Use reduce function to merge the arrays
var res = arr.reduce(function(a, b) {
  // Iterate over the arrays to update the total values
  var ret = a.map(function(v, i) {
    v.total += b[i].total;
    // Return the updated object
    return v;
  });
  // Return the merged array
  return ret;
});

document.write('<pre>' + JSON.stringify(res, null, 3) + '</pre>');

UPDATE 1 : If the order is random, add an additional for loop inside map() to compare the content property.

var arr = [
  [{
    content: 'Aqurie',
    total: 5
  }, {
    content: 'Mail function',
    total: 4
  }],
  [{
    content: 'Mail function',
    total: 10
  }, {
    content: 'Aqurie',
    total: 4
  }]
];

// Use reduce function to merge the arrays
var res = arr.reduce(function(a, b) {
  // Iterate over the inner arrays and update total value based on content
  var ret = a.map(function(v) {
    // Use a for loop to find the matching index in the array
    for (i1 = 0; i1 < b.length; i1++) {
      // Check content for matching
      if (v.content == b[i1].content) {
        // Update the total value if matched
        v.total += b[i1].total;
        // Break the loop on match
        break;
      }
    }
    // Return the updated array
    return v;
  });
  // Return the merged array
  return ret;
});

document.write('<pre>' + JSON.stringify(res, null, 3) + '</pre>');

UPDATE 2 : The previous method may not work for certain cases where it only updates the total of the first array values. For example, if the second array contains different content, it will be skipped.

var arr = [
  [{
    content: 'Aqurie',
    total: 5
  }],
  [{
    content: 'Mail function',
    total: 10
  }, {
    content: 'Aqurie',
    total: 4
  }],
  [{
    content: 'other',
    total: 4
  }]

];

// Use reduce function to merge the arrays
var res = arr.reduce(function(a, b) {
  // Iterate over inner arrays and update total value based on content
  b.forEach(function(v) {
    // Use a for loop to find the matching array index
    var found = false;
    for (i1 = 0; i1 < a.length; i1++) {
      // Check content for matching
      if (v.content == a[i1].content) {
        found = true;
        // Update the total value if matched
        a[i1].total += v.total;
        // Break the loop on match
        break;
      }
    }
    // Push the element if a new element is found
    if (!found)
      a.push(v);
  });
  return a;
});

document.write('<pre>' + JSON.stringify(res, null, 3) + '</pre>');

Answer 2

If the order of elements in the nested arrays remains the same, you can use the following method:

var arr = [
  [{
    content: 'Aqurie',
    total: 5
  }, {
    content: 'Mail function',
    total: 4
  }],
  [{
    content: 'Aqurie',
    total: 4
  }, {
    content: 'Mail function',
    total: 10
  }]
];

// Use reduce function to merge the arrays
var res = arr.reduce(function(a, b) {
  // Iterate over the arrays to update the total values
  var ret = a.map(function(v, i) {
    v.total += b[i].total;
    // Return the updated object
    return v;
  });
  // Return the merged array
  return ret;
});

document.write('<pre>' + JSON.stringify(res, null, 3) + '</pre>');

UPDATE 1 : If the order is random, add an additional for loop inside map() to compare the content property.

var arr = [
  [{
    content: 'Aqurie',
    total: 5
  }, {
    content: 'Mail function',
    total: 4
  }],
  [{
    content: 'Mail function',
    total: 10
  }, {
    content: 'Aqurie',
    total: 4
  }]
];

// Use reduce function to merge the arrays
var res = arr.reduce(function(a, b) {
  // Iterate over the inner arrays and update total value based on content
  var ret = a.map(function(v) {
    // Use a for loop to find the matching index in the array
    for (i1 = 0; i1 < b.length; i1++) {
      // Check content for matching
      if (v.content == b[i1].content) {
        // Update the total value if matched
        v.total += b[i1].total;
        // Break the loop on match
        break;
      }
    }
    // Return the updated array
    return v;
  });
  // Return the merged array
  return ret;
});

document.write('<pre>' + JSON.stringify(res, null, 3) + '</pre>');

UPDATE 2 : The previous method may not work for certain cases where it only updates the total of the first array values. For example, if the second array contains different content, it will be skipped.

var arr = [
  [{
    content: 'Aqurie',
    total: 5
  }],
  [{
    content: 'Mail function',
    total: 10
  }, {
    content: 'Aqurie',
    total: 4
  }],
  [{
    content: 'other',
    total: 4
  }]

];

// Use reduce function to merge the arrays
var res = arr.reduce(function(a, b) {
  // Iterate over inner arrays and update total value based on content
  b.forEach(function(v) {
    // Use a for loop to find the matching array index
    var found = false;
    for (i1 = 0; i1 < a.length; i1++) {
      // Check content for matching
      if (v.content == a[i1].content) {
        found = true;
        // Update the total value if matched
        a[i1].total += v.total;
        // Break the loop on match
        break;
      }
    }
    // Push the element if a new element is found
    if (!found)
      a.push(v);
  });
  return a;
});

document.write('<pre>' + JSON.stringify(res, null, 3) + '</pre>');

Answer 3

Answer №2

Give it a shot,

const flattenAndSum = (arr) => {
  const newArr = [];
  let existing;
  arr.forEach((itm) => {
    itm.forEach((inner) => {
      existing = findIt(inner, newArr);
      if(existing){
        existing.total += inner.total;
      } else {
         newArr.push(inner);
      }
    });
  });

  return newArr;
}

const findIt = (obj, newArr) => {
 for(let i = 0; i < newArr.length; i++) {
   if(newArr[i].content === obj.content){
     return newArr[i];
   }
 }
}

console.log(flattenAndSum(arr));

Check out the DEMO

Answer 4

Give it a shot,

const flattenAndSum = (arr) => {
  const newArr = [];
  let existing;
  arr.forEach((itm) => {
    itm.forEach((inner) => {
      existing = findIt(inner, newArr);
      if(existing){
        existing.total += inner.total;
      } else {
         newArr.push(inner);
      }
    });
  });

  return newArr;
}

const findIt = (obj, newArr) => {
 for(let i = 0; i < newArr.length; i++) {
   if(newArr[i].content === obj.content){
     return newArr[i];
   }
 }
}

console.log(flattenAndSum(arr));

Combining multiple objects in an array to create a single object with the aggregated sum value can be achieved using JavaScript

Answer №1

Answer №2

Check out the DEMO

Similar questions

What is the correct method to choose an element in jQuery based on the function's id parameter

The absence of CORS headers detected in XMLHttpRequest

UI thread was blocked due to withProgress being invoked from an external library function

Encountering an issue when trying to start npm in the command line interface

methods for sharing real-time data between parent and child components in Angular versions 2 and above

Searching for identical consecutive numbers in a grid

Combine functions from two objects that share the same properties into an array for each property

Is TypeScript's nullish coalescing operator (??) supported by more browsers compared to JavaScript's equivalent?

MongoDB has encountered an issue where it is unable to create the property '_id' on a string

Using Regular Expressions in an ExpressJS Router

Ways to Randomly Flip Divs

Using Jquery to extract URL parameters

How can I transfer a collection of JSON objects from JavaScript to C#?

What is the best way to draw a rectangle outline in Vue.js without the need for any additional packages?

Failed to retrieve the requested item using fetch, encountering a NetworkError

The total height of the document's body in jQuery is not equal to the sum of the viewport height and the window's scroll top position at the bottom of the document

Breaking or wrapping lines in Visual Studio Code

Displaying child properties in a functional ReactJS component

Tips for managing boolean values in a JSON data structure

Submit the chosen options as an array