How to assign in nested object using Object.assign()?

Question

My main object looks like this:

const obj = {

    data: {
        'Puppies' : [],
        'Kittens': []
    }
};

I want to assign a value to the data field in data.Puppies[0].

When I try to do this using Object.assign() I get an error:

    Unexpected token, expected , (83:12)

  81 | 
  82 |     return Object.assign({}, obj, {
> 83 |         data.Puppies[0]: list
     |             ^
  84 |     });
  85 | }
  86 |

I'm not sure how I can accomplish my task. I need to use Object.assign() because I need to return a new object not the original one. I am doing this because of a Redux reducer in ReactJS.

so basically cou need to get a copy from obj with an new item in Puppies at index zero without mutating the original object, right? — Nina Scholz
– Nina Scholz, Commented Feb 19, 2017 at 12:54

dmitry · Accepted Answer · 2017-02-19 12:50:07Z

1

ES6 way without mutations:

const obj = {
    data: {
        'Puppies' : [],
        'Kittens': []
    }
};

const data = Object.assign({}, obj.data, {
                 Puppies: [...obj.data.Puppies, 'newValue']
             });    
const newObject = Object.assign({}, obj, {data});
console.log(newObject);

edited Feb 19, 2017 at 12:50

answered Feb 19, 2017 at 12:39

dmitry

416 bronze badges

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

Comments

Nina Scholz · Accepted Answer · 2017-02-19 12:58:24Z

1

You could assign the outer object and assign to the array the new content at index 0 without mutating the original obj.

const list = ['foo', 'bar'];
const obj = { data: { Puppies: [], Kittens: [] } };

console.log(Object.assign({}, obj, { data: { Puppies: Object.assign([], obj.data.Puppies, { 0: list }) } }));
console.log(obj);

The same with content for Puppies.

const list = ['foo', 'bar'];
const obj = { data: { Puppies: ['bar', 42], Kittens: [] } };

console.log(Object.assign({}, obj, { data: { Puppies: Object.assign([], obj.data.Puppies, { 0: list }) } }));
console.log(obj);

edited Feb 19, 2017 at 12:58

answered Feb 19, 2017 at 12:42

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

4 Comments

user1261710 Over a year ago

What if puppies and kittens might change? How about a variable Kitten?

Nina Scholz Over a year ago

then you could use the pattern for Kitten as well { data: { Kitten: Object.assign([], obj.data.Kitten, { 0: data }) } }

user1261710 Over a year ago

NO I mean you have hard-coded Puppies and Kittens. What if we don't know which one it is?

Nina Scholz Over a year ago

if you dont know what array you need with some new data, you can not assign it, anyway. for a deep copy, you could use some other technique.

user93 · Accepted Answer · 2017-02-19 12:53:28Z

0

You could try using Ramdajs lens to achieve this

const obj = {
    data: {
        'Puppies' : [],
        'Kittens': []
    }
};

const list = [1,2,3,4];
const xlens = R.lensPath(['data', 'Puppies'])
console.log(R.set(xlens, list, obj))

Here is the code repel

answered Feb 19, 2017 at 12:53

user93

1,8705 gold badges27 silver badges46 bronze badges

2 Comments

Abdennour TOUMI Over a year ago

😂,, you are obsessed by ramda .

Abdennour TOUMI Over a year ago

nothing wrong but only editing answers of others and injecting this poor library

Austin France · Accepted Answer · 2017-02-19 12:54:52Z

0

Replace Puppies with a new array with list as element 0 and the rest of Puppies starting with element 1, so effectively replacing element 0.

var obj = { data: { 'Puppies': [], 'Kittens': [] } };
var list = [ 'a', 'b' ];

var n = Object.assign({}, obj, {
  data: Object.assign({}, obj.data, {
    Puppies: [ list ].concat(obj.data.Puppies.slice(1))
  })
});

console.log(obj);
console.log(n);

edited Feb 19, 2017 at 12:54

answered Feb 19, 2017 at 12:43

Austin France

2,5595 gold badges29 silver badges41 bronze badges

Collectives™ on Stack Overflow

How to assign in nested object using Object.assign()?

4 Answers 4

Comments

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related