append static elements in object to each object in array of objects javascript

Question

How do I take this object and array.

const data = {
    type: "hello",
    point: 1.8
};

const raw = [
    {
        x: [1, 2],
        y: [-1.1, -1.2]
    },
    {
        x: [14, 24],
        y: [-1.14, 1.24]
    }
];

Then "append" the items in the data object to each object in the raw array. The desired end result is;

const result = [
    {
        x: [1, 2],
        y: [-1.1, -1.2],
        type: "hello",
        point: 1.8
    },
    {
        x: [14, 24],
        y: [-1.14, 1.24],
        type: "hello",
        point: 1.8
    }
];

I tried using map but this object works with arrays, then I looked at using Object.keys but am having no luck.

score 2 · Accepted Answer · answered Jun 09 '19 at 10:48

2

Use map with spreading:

const data = {type:"hello",point:1.8};
const raw = [{x:[1,2],y:[-1.1,-1.2]},{x:[14,24],y:[-1.14,1.24]}];
const result = raw.map(e => ({ ...e, ...data }));
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: auto; }

ES5 syntax:

var data = {type:"hello",point:1.8};
var raw = [{x:[1,2],y:[-1.1,-1.2]},{x:[14,24],y:[-1.14,1.24]}];
var result = raw.map(function(e) { 
  return Object.assign({}, e, data);
});
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: auto; }

answered Jun 09 '19 at 10:48

Jack Bashford

43,180
11
50
79

I see, using Object.assign is the older ES5 syntax. But the same can be achieve using ES6 spread syntax. Lovely thank you. I have marked this as the official solution. – Sigex Jun 09 '19 at 11:10
@Sigex - See my comments on your answer. – T.J. Crowder Jun 09 '19 at 11:11

score 1 · Answer 2 · answered Jun 09 '19 at 10:46

map is indeed the tool you want. I'd probably combine it with destructuring in the map callback parameter list and property spread in the result value:

const result = raw.map(({x, y}) => ({x, y, ...data}));

Live Copy:

const data = {
    type: "hello",
    point: 1.8
};
const raw = [
    {
        x: [1, 2],
        y: [-1.1, -1.2]
    },
    {
        x: [14, 24],
        y: [-1.14, 1.24]
    }
];
const result = raw.map(({x, y}) => ({x, y, ...data}));
console.log(result);

Note that if data had any properties whose values were objects (data in your example doesn't), using spread will copy only the references to the objects, it won't make deep copies. So all of your result objects should share them. You could deep copy if that were relevant.

Thank you, I prefer the use of the spread operator on each object in the raw array. Rather than destructing and referencing objects x and y directly. The actual code I have has about 6 objects. I limited it to just x and y for the sample. — Sigex, Jun 09 '19 at 11:09
@Sigex - Yeah. As I mentioned in a comment on Jack's answer, it's not clear to me why I limited it to `x` and `y`. :-) — T.J. Crowder, Jun 09 '19 at 11:10

score 0 · Answer 3 · answered Jun 09 '19 at 11:02

0

I found a solution;

const data = {type:"hello",point:1.8};
const raw = [{x:[1,2],y:[-1.1,-1.2]},{x:[14,24],y:[-1.14,1.24]}];
const result = raw.map(r => Object.assign(r, data));
console.log(result);

Some feedback on this approach would be appreciated. Looking a the solutions provided now. Thank you all.

answered Jun 09 '19 at 11:02

Sigex

2,834
2
24
25

1

That works just fine. The only significant difference between this and what Jack and I did is that you're **modifying** the objects in the `raw` array, and we're making shallow copies of them. So `raw` and `result` will both contain the same, extended, objects (`raw[0].point` will be `1.8`). With Jack's and my approach, `raw` would have the original objects unchanged, and `result` would have new objects with `x`, `y`, and the new properties. – T.J. Crowder Jun 09 '19 at 11:09
1

One other minor thing is that property spread notation is quite new (ES2018). If you want the equivalent of Jack's answer using `Object.assign` instead, it would be: `=> Object.assign({}, e, data)`. – T.J. Crowder Jun 09 '19 at 11:11
Thank you T.J, I am using Typescript so spread operator is fine. But helpful to those who read this and are using JavaScript ES5. – Sigex Jun 10 '19 at 13:11

append static elements in object to each object in array of objects javascript

3 Answers3