Merge multiple array of objects based on a key

Question

I need to merge a list of array of objects by a key. I tried to find materials online but ended up only on merging 2 array of objects.

But I have multiple array of objects in an array.

response = [
    [
        {
            "topic": "Topic 1",
            "avgwk38": 5
        },
        {
            "topic": "Topic 2",
            "avgwk38": 86
        },
        {
            "topic": "Topic 3",
            "avgwk38": 6
        }
    ],
    [
        {
            "topic": "Topic 1",
            "avgwk39": 25
        },
        {
            "topic": "Topic 2",
            "avgwk39": 32
        },
        {
            "topic": "Topic 3",
            "avgwk39": 4
        }
    ]
]

Here is my expected result.

[
    {
        "topic": "Topic 1",
        "avgwk38": 5,
        "avgwk39": 25
    },
    {
        "topic": "Topic 2",
        "avgwk38": 86,
        "avgwk39": 32
    },
    {
        "topic": "Topic 3",
        "avgwk38": 6,
        "avgwk39": 4
    }
]

Please help me out to resolve this.

Does this answer your question? Javascript: Merge Two Arrays of Objects, Only If Not Duplicate (Based on Specified Object Key) — NullDev
– NullDev, Commented Oct 13, 2020 at 10:16
You are going to merge objects based on same topic key value/ — Derek Wang
– Derek Wang, Commented Oct 13, 2020 at 10:17
@NullDev I think the solution provided is limited to 2 arrays (old and new array) — Solomon Raja
– Solomon Raja, Commented Oct 13, 2020 at 10:30

PAG · Accepted Answer · 2020-10-13 10:18:47Z

1

You could flatten your array and reduce values.

response.flat().reduce((acc, value) => {
  let existingValueIndex = acc.findIndex(obj => obj.topic === value.topic);
  if (existingValueIndex === -1) {
    acc.push({ ...value });
    return acc;
  }

  acc[existingValueIndex] = {
    ...acc[existingValueIndex],
    ...value,
  };
  return acc;
}, []);

It's not really efficient if you have big arrays. You can also use a Set to keep track on Topic names and prevent searching in the array for each iteration.

answered Oct 13, 2020 at 10:18

PAG

264 bronze badges

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

1 Comment

Solomon Raja Over a year ago

Thank you @PAG this is working like a charm. I have only small arrays, as this is a monthly view with each week's average value.

zb22 · Accepted Answer · 2020-10-13 10:45:27Z

1

Here is another way of solving this,
Making an object of topics with a unique topic, which contains the properties of each topic item.

Finally using Object.values() to make this an array.

const response = [
    [
        {
            "topic": "Topic 1",
            "avgwk38": 5
        },
        {
            "topic": "Topic 2",
            "avgwk38": 86
        },
        {
            "topic": "Topic 3",
            "avgwk38": 6
        }
    ],
    [
        {
            "topic": "Topic 1",
            "avgwk39": 25
        },
        {
            "topic": "Topic 2",
            "avgwk39": 32
        },
        {
            "topic": "Topic 3",
            "avgwk39": 4
        }
    ]
]

const obj = response.flat().reduce((acc, curr) => {
  if(!acc[curr.topic]) {
    acc[curr.topic] = {
      ...curr
    }
  } else {
    acc[curr.topic] = {
      ...acc[curr.topic],
      ...curr
    }
  }

  return acc;
}, {});

console.log(Object.values(obj));

answered Oct 13, 2020 at 10:45

zb22

3,2413 gold badges22 silver badges38 bronze badges

1 Comment

Solomon Raja Over a year ago

Thanks mate @zb22 . Spread operator acts as a super power to JS

Collectives™ on Stack Overflow

Merge multiple array of objects based on a key

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related