spread array into object

Question

I have this bit of code:

const calcRowCssClasses = (<string[]>context.dataItem.cssClasses).map(
        (cssClass) => {
          return { [cssClass]: true };
        }
      );

This produces the following array of objects:

{ "custom-calcrow-1": true },
{ "custom-calcrow-2": true }

Now, I have a starting object like this:

{ "calcrow": true}

The questin is, how can I add the above two entries to the existing object, such that the output will be an object like this:

{
  "calcrow": true,
  "custom-calcrow-1": true,
  "custom-calcrow-2": true
}

Basically, I would like to spread an array of objects. Doing like this

return { calcrow: true, ...calcRowCssClasses };

has this result:

0: {custom-calcrow-1: true},
1: {custom-calcrow-2: true},
calcrow: true

Which isn't the expected result.

Thanks.

Why not loop through the array and add the cssClass property the existing object? cssClasses.forEach(c => existing[c] = true) — adiga
– adiga, Commented Feb 23, 2024 at 14:26
Are you producing that array of objects solely to populate the starting object? — canon
– canon, Commented Feb 23, 2024 at 18:12

T.J. Crowder · Accepted Answer · 2024-02-23 14:43:20Z

4

You could take Object.assign with spreading the array as parameters.

return Object.assign({ calcrow: true }, ...calcRowCssClasses);

const calcRowCssClasses = [
    { "custom-calcrow-1": true },
    { "custom-calcrow-2": true }
];

const originalObject = { calcrow: true };

const result = Object.assign(originalObject, ...calcRowCssClasses);

console.log(JSON.stringify(result, null, 4));

edited Feb 23, 2024 at 14:43

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

answered Feb 23, 2024 at 14:40

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

1 Comment

T.J. Crowder Over a year ago

@derstauner Or result = Object.assign({}, originalObject, ...calcRowCssClasses) if leaving the original object alone is necessary.

Roko C. Buljan · Accepted Answer · 2024-02-23 14:32:27Z

2

Instead of .map() use Array.prototype.reduce

const context = {dataItem: {cssClasses: ["custom-calcrow-1","custom-calcrow-2"]}};

const calcRowCssClasses = context.dataItem.cssClasses.reduce((ob, cssClass) => (ob[cssClass] = true, ob), {});

console.log({calcrow: true, ...calcRowCssClasses});

answered Feb 23, 2024 at 14:32

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

1 Comment

canon Over a year ago

Could also just add calcrow to the initial value provided to reduce and skip the destructuring entirely.

Collectives™ on Stack Overflow

spread array into object

2 Answers 2

1 Comment

1 Comment

Your Answer

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

Related