Clone array of object removes class type

Question

I have to deep clone an array of objects

  filterList: Filter[] = [
    new ChipsFilter('Rating', 'rating',
      [
        {
          name: '5 ★',
          key: '5',
          value: true
        },
        {
          name: '4 ★',
          key: '4',
          value: true
        },
        {
          name: '3 ★',
          key: '3',
          value: true
        },
        {
          name: '2 ★',
          key: '2',
          value: true
        },
        {
          name: '1 ★',
          key: '1',
          value: true
        }
      ]),
    new CheckboxFilter('Country', 'country', [
      {
        name: 'India',
        key: 'india',
        value: true
      },
      {
        name: 'Brazil',
        key: 'brazil',
        value: false
      },
      {
        name: 'UAE',
        key: 'uae',
        value: true
      },
      {
        name: 'Sri Lanka',
        key: 'sri-lanka',
        value: true
      },
      {
        name: 'USA',
        key: 'usa',
        value: false
      },
      {
        name: 'England',
        key: 'england',
        value: true
      },
      {
        name: 'South Africa',
        key: 'south-africa',
        value: true
      }
    ]),
    new CalendarFilter('Date', 'createdAt', [
      {
        name: 'Start Date',
        key: 'startDate',
        value: ''
      },
      {
        name: 'End Date',
        key: 'endDate',
        value: ''
      }
    ]),
  ];

After clone I want the data type of objects to be same but I get the object as the type instead, have tried below methods for cloning.

Using JSON stringify

this.filterList = this.filterList.map(a => Object.assign({}, a));

Using object.assign

this.filterList = this.filterList.map(a => Object.assign({}, a));

`Object.assign` used that way is not going to clone objects in a way that preserves type information. Depending on the structure of those classes (which you don't show) it may not clone them at all. — Jared Smith, Jun 07 '19 at 18:06
Using Object.assign(...) says assign the second argument to the structure represented in the first argument - in this case, it is an Object object. — Randy Casburn, Jun 07 '19 at 18:06
Possible duplicate of [typescript - cloning object](https://stackoverflow.com/questions/28150967/typescript-cloning-object) — Jared Smith, Jun 07 '19 at 18:07

score 0 · Answer 1 · answered Jun 07 '19 at 18:07

The first argument to Object.assign() is the target object. That object effectively is the result. What Object.assign() does is just copy over own enumerable properties of your CalendarFilter instances to that target.

What you could do instead is create new instances of your objects in array.map() instead of assigning them to a generic object with Object.assign().

this.filterList = this.filterList.map(a => new CalendarFilter(...))

Of course, you need to use the right constructor for each type you encounter in your array.

there not just CalendarFilter, have a look at the example it shows 3 types of class objects — Varun Sukheja, Jun 07 '19 at 18:11

Randy Casburn · Answer 2 · 2019-06-07T18:20:03.420

0

This will take into account the variable Object types:

class ChipsFilter {constructor(){this.chipsProp="chipsProp"}}
class CheckboxFilter {constructor(){this.checkboxProp= "checkboxProp"}}
class CalendarFilter {constructor(){this.calendarProp= "calendarProp"}}

const filterList = [
  new ChipsFilter(),
  new CheckboxFilter(),
  new CalendarFilter(),
];

let out = filterList.map(obj=>Object.assign(new obj.constructor, obj));
console.log(out[0].constructor, out[0]);
console.log(out[1].constructor, out[1]);
console.log(out[2].constructor, out[2]);

edited Jun 07 '19 at 18:20

answered Jun 07 '19 at 18:12

Randy Casburn

13,840
1
16
31

Getting error: Cannot use 'new' with an expression whose type lacks a call or construct signature.ts(2351) – Varun Sukheja Jun 07 '19 at 18:21
That's a typescript linting problem. You can clearly see this works. – Randy Casburn Jun 07 '19 at 18:22

Clone array of object removes class type

2 Answers2