How to reassign values of a nested (read only) object in ES6?

Question

I have a read only object of travelers with this format:

{
    "teens": {
        "count": 2,
        "persons": {
            {
                "age": "13",
                "name": "Carey",
                "surname": "Price",
                "birth_date": "05-04-2007",
            },
            {
                "age": "14",
                "name": "Isaias",
                "surname": "Beahan",
                "birth_date": "01-24-2007",
            },
        },
    },
    "adults": {
       "count": 1,
       "persons": {
            {
                "age": "31",
                "name": "Effie",
                "surname": "Bednar",
                "birth_date": "04-19-1989",
            }
       },
    },
}

And I need change the format of the birth_date of each person to YYYY-MM-DD format. Here's my attempt:

Object.entries(travelers).forEach(([key, value]) => {
    return value.persons.map((person: IPersonJSON) => {
        return {
            ...person,
            birth_date: new Date(person.birth_date).toString().slice(0, 10),
        };
    });
});

console.log(travelers);

However on logging the travelers, the original object is unchanged. What am I missing here?

EDIT:

Here's an attempt to clone the object and reassign those values:

const copy = Object.assign({}, travelers);
            
Object.entries(copy).forEach(([key, value]) => {
    value.persons.forEach(person => {
        person.birth_date = new Date(person.birth_date).toISOString().slice(0,10);
    });
});

console.log(copy);

I still get this error: Cannot assign to read only property 'birth_date' of object '[object Object]'

`.map()` creates a new array. Also, you're not altering the object in the callback, either. If you want to change it in place, you're better off using a `.forEach()` or a regular loop and directly change the value with `person.birth_date = /* new value */` — VLAZ, Mar 16 '21 at 13:52
@VLAZ I did try this initally but ran into problems about assigning to read only properties of an object: `Cannot assign to read only property 'birth_date' of object '[object Object]'` — f7n, Mar 16 '21 at 13:58
This is relevant information for the question. In that case, you need to create an entirely new object by cloning and modifying the old one. — VLAZ, Mar 16 '21 at 14:02
Even when I create a copy and try to reassign that value I get the `cannot assign to read only property` error — f7n, Mar 16 '21 at 15:07
It's read-only because it's immutable, the object is coming from the state. — f7n, Mar 16 '21 at 15:15

Priyesha yadav · Accepted Answer · 2021-03-16T15:02:28.733

0

In the 'travelers' object, the nested key 'persons' should be an array like this -

"persons": [
        {
            "age": "13",
            "name": "Carey",
            "surname": "Price",
            "birth_date": "05-04-2007",
        },
        {
            "age": "14",
            "name": "Isaias",
            "surname": "Beahan",
            "birth_date": "01-24-2007",
        },
     ]

Then to update format of birth_date of each person, you can use following code -

Object.entries(travelers).forEach(([key, value]) => {
    value.persons.forEach(person => {
         person.birth_date = new Date(person.birth_date).toISOString().slice(0,10);
    });
});

edited Mar 16 '21 at 15:02

answered Mar 16 '21 at 14:42

Priyesha yadav

152
1
10

But won't this cause the same read only error as above? How can I make this work if I need to clone the object first? – f7n Mar 16 '21 at 14:46
I've added an edit in my question with an attempt to clone the object first. Can you take a look? – f7n Mar 16 '21 at 15:07
If your object 'traveler' is read-only, you can change it's property using above method. However if you don't want to change the original object, you can first clone it using various ways. You can refer this - https://stackoverflow.com/questions/12690107/clone-object-without-reference-javascript – Priyesha yadav Mar 16 '21 at 15:08
Use const copy = JSON.parse(JSON.stringify(travelers)); to clone the traveler object. – Priyesha yadav Mar 16 '21 at 15:17
Thanks, this is the correct way to clone an object. – f7n Mar 16 '21 at 15:27

How to reassign values of a nested (read only) object in ES6?

1 Answers1