Combine array of objects inner array based on property

Question

say I have a data structure that looks like this:

data = [
        {title: "Alpha", content: [{ // 1 item }]},
        {title: "Beta", content: [{ // 10 items }]},
        {title: "Beta", content: [{ // 12 items }]}, 
        {title: "Beta", content: [{ // 8 items }]} 
       ]

I'd like to figure out a reduce function that would return the following structure:

data = [
        {title: "Alpha", content: [{ // 1 item }]},
        {title: "Beta", content: [{ // 30 items }]}
       ]

I've tried looking at some answers where reduce is used based on title but it did not return the new structure with the accumulated content array such as:

data = data.reduce((x, e) => {
          x.push(
            Object.assign(
              {},
              e,
              messages.find((x) => x.title == e.title)
            )
          )
          return x
        }, [])

Any help would be great.

planet_hunter · Accepted Answer · 2020-06-14 20:54:12Z

2

This might help -

var data = [{
    title: "Alpha",
    content: [1, 2, 3, 4, 5]
  },
  {
    title: "Beta",
    content: [6, 7, 8, 9, 10]
  },
  {
    title: "Beta",
    content: [11, 12, 13, 14, 15]
  },
  {
    title: "Beta",
    content: [16, 17, 18, 19, 20]
  }
]

data = data.reduce((array, item) => {
  const existingItem = array.find(innerItem => innerItem.title === item.title);
  if (!!existingItem) {
    existingItem.content = [...existingItem.content, ...item.content];
  } else {
    array.push(item);
  }
  return array;
}, []);


console.log(data);

answered Jun 14, 2020 at 20:54

planet_hunter

3,9961 gold badge32 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

gwar9 Over a year ago

This looks pretty close to what I want. When trying it out I get a can't read content of undefined error. To clarify the data structure content would be an array of objects (not numbers, I know I didnt make that clear) ... would that change your answer at all ?

planet_hunter Over a year ago

Ideally array of anything should work here, can you check if you have any differences between this answer and your code?

user120242 · Accepted Answer · 2020-06-14 21:18:06Z

2

You don't need to use .find, which has to search the entire array every iteration.

Using reduce and an object map to collect dupes, Object.values to unwrap object to array. spread syntax to feed as push arguments.

data = [
        {title: "Alpha", content: [{ 1:1 }]},
        {title: "Beta", content: [{2:2 }]},
        {title: "Beta", content: [{ 3:3}]}, 
        {title: "Beta", content: [{4:4}] }
       ]
console.log(
Object.values(data.reduce((acc,{title,content})=>{
  acc[title] ? 
    acc[title].content.push(...content) :
    acc[title] = { title, content }
  return acc
},{})
))

If IE compatible is needed, there is a polyfill on the above linked documentation. This will also work:

data = [
        {title: "Alpha", content: [{ 1:1 }]},
        {title: "Beta", content: [{2:2 }]},
        {title: "Beta", content: [{ 3:3}]}, 
        {title: "Beta", content: [{4:4}] }
       ]
function values(obj){
  return Object.keys(obj).map(k=>obj[k])
}
console.log(
values(data.reduce((acc,x)=>{
  acc[x.title] = acc[x.title] || {title: x.title, content: []}
  acc[x.title].content = acc[x.title].content.concat(x.content)
  return acc
},{})
))

edited Jun 14, 2020 at 21:18

answered Jun 14, 2020 at 20:58

user120242

15.3k3 gold badges43 silver badges53 bronze badges

2 Comments

planet_hunter Over a year ago

Whilst this answer gives the correct answer, we need to keep in mind that Object.values is currently not supported in IE :)

user120242 Over a year ago

The linked article already has a polyfill: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… which is pretty trivial.

vishnu raj · Accepted Answer · 2020-06-15 08:12:14Z

0

I made small changes from @user120242 code.

data = [
        {title: "Alpha", content: [{ 1:1 }]},
        {title: "Beta", content: [{2:2 }]},
        {title: "Beta", content: [{ 3:3}]}, 
        {title: "Beta", content: [{4:4}] }
       ]
let acc={};
data.forEach((x)=>{
  acc[x.title] = acc[x.title] || {title: x.title, content: []}
  acc[x.title].content = acc[x.title].content.concat(x.content)
}
)
console.log(acc)

answered Jun 15, 2020 at 8:12

vishnu raj

1063 bronze badges

Collectives™ on Stack Overflow

Combine array of objects inner array based on property

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related