Spread an array of objects into a parent object

Question

Is there a simple way to use the spread ... operator to combine an array of objects with a another object to create a single object? This example shows what I'm trying to accomplish:

const arrayOfObjects = [
  { x: 'foo' },
  { y: 'bar' }
];

const obj = {
  hello: 'world'
};

The output I'm looking for is as follows:

{
  x: 'foo',
  y: 'bar',
  hello: 'world'
}

I've tried the following, amongst other things, but it doesn't quite give the intended output.

{
  hello: 'world'
  ...arrayOfObjects
}

// Gives
{
  0: { x: 'foo' },
  1: { y: 'bar' },
  hello: 'world'
};

Is it possible to do this with clever use of the spread operator?

Object.assign() would be a very helpful tool for this job. — Redu
– Redu, Commented Nov 28, 2016 at 15:52

Nenad Vracar · Accepted Answer · 2016-11-28 15:51:58Z

65

You can use Object.assign() with spread syntax ...

const arrayOfObjects = [{
  x: 'foo'
}, {
  y: 'bar'
}];

const obj = {
  hello: 'world'
};

var result = Object.assign({}, obj, ...arrayOfObjects);
console.log(result)

answered Nov 28, 2016 at 15:51

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

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

3 Comments

joshfarrant Over a year ago

Thanks, appears to be the best way to do it. Interesting that there's not a way to do it using nothing but ..., but this works great. Thanks!

emseidov Over a year ago

Can you clarify why spread is not working here? I thought I knew everything about spread :(

Nenad Vracar Over a year ago

@Genesis Algorithms Well when you spread an array of objects, each individual element is object so you kind of need an additional spread for each object and that is where Object.assign comes in. If you think about it when you just do {...arrayOfObjects} you are trying something like this {{}, {}} and that is invalid syntax.

pato · Accepted Answer · 2016-11-28 15:52:47Z

6

U can use Object.assign();

Object.assign(obj, ...arrayOfObjects)

This option will mutate object obj instead of creating new instance.

answered Nov 28, 2016 at 15:52

pato

9086 silver badges10 bronze badges

1 Comment

inostia Over a year ago

Thanks for clarifying that this mutates the object. Note this also works for object properties: let foo = { bar : {} }; Object.assign(foo.bar, ...arrayOfObjects);

Louay Al-osh · Accepted Answer · 2021-01-27 14:59:41Z

3

Object.assign is great, I came up with another possible solution using reduce for who like using it


const arrayOfObjects = [
  { x: 'foo' },
  { y: 'bar' }
];

const obj = {
  hello: 'world'
};

let result = arrayOfObjects.reduce((prev, current) => ({
        ...prev,
        ...current
    }), obj)

console.log(result);
// {hello: "world", x: "foo", y: "bar"}

edited Jan 27, 2021 at 14:59

answered Sep 3, 2020 at 6:49

Louay Al-osh

3,43721 silver badges31 bronze badges

Comments

nvirth · Accepted Answer · 2022-04-06 12:40:34Z

3

Based on @Nenad Vracar's answer, there is also this syntax:

{
    ...someObject,
    ...Object.assign({}, ...someArray),
    ...someOtherObject,
}

Seems to work: https://jsfiddle.net/2tq1xem7/

answered Apr 6, 2022 at 12:40

nvirth

1,7512 gold badges14 silver badges23 bronze badges

Comments

Nermin · Accepted Answer · 2024-11-18 11:49:05Z

0

You can use `Object.fromEntries()`

const arrayOfObjects = [
  { x: 'foo' },
  { y: 'bar' }
];

const obj = {
  hello: 'world'
};

const result = {
  ...Object.fromEntries(arrayOfObjects.flatMap(Object.entries)),
  ...obj,
}

console.log(result)

answered Nov 18, 2024 at 11:49

Nermin

1,14011 silver badges30 bronze badges

Collectives™ on Stack Overflow

Spread an array of objects into a parent object

5 Answers 5

3 Comments

1 Comment

Comments

Comments

You can use `Object.fromEntries()`

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

1 Comment

Comments

Comments

You can use Object.fromEntries()

Comments

Your Answer

Sign up or log in

Post as a guest

Related

You can use `Object.fromEntries()`