title: Deep copy, children still refer to original object
body: <p>I have a problem with deep copy/clone on a object (TypeScript,Angular4,Ionic3) that also holds a list of other objects. Whenever I change the child objects in the copy, the original is also inflicted by the change and vice versa. My REST API gives me the following JSON back:</p>
  
  <p><a href="https://i.stack.imgur.com/3VmdM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3VmdM.png" alt="enter image description here"></a></p>
  
  <p>I have 2 types of objects that are relevant in this case, there are more but they do not need to be changed, therefore I do not include those:</p>
  
  <pre><code>import { Declaration } from './declaration.entity';
  
  export class Period{
      constructor(
          public number: number,
          public status: string,
          public year: number,
          public month: number,
          public sum: number,
          public orderNumber: string,
          public userId: string,
          public submitDate: Date,
          public comment: string,
          public declarations: Declaration[]
      ){}
  }
  </code></pre>
  
  <p>And</p>
  
  <pre><code>import { FileCustom } from './file.entity';
  import { Period } from './period.entity';
  
  export class Declaration{
      constructor(
          public id: number,
          public status: string,
          public name: string,
          public description: string,
          public amount: number,
          public date: Date,
          public period: Period,
          public userId: string,
          public files: FileCustom[],
          public comment: string   
      ){}
  }
  </code></pre>
  
  <p>I want to change the field of a Declaration that is inside a Period. I have a object called periods (list of periods), which I want to clone. I need periods to be untouched. I looked at some other topics with possible solutions and tried them:</p>
  
  <pre><code>let cloned = this.periods.map(x =&gt; Object.assign({},x));
  </code></pre>
  
  <p>And</p>
  
  <pre><code>let cloned = this.periods.map(x =&gt; Object.assign([],x));
  </code></pre>
  
  <p>From this topic:</p>
  
  <p><a href="https://stackoverflow.com/questions/35504310/deep-copy-an-array-in-angular-2-typescript">Deep copy an array in Angular 2 + TypeScript</a></p>
  
  <p>When I use one of the above solutions and change for example the comment field of the <strong>period</strong> in the copy, the original file remains untouched. But when I change the comment field of the <strong>declaration</strong> inside the period, the original file is also changed, which is what I want to prevent. How can I deep copy/clone my list of periods without any children having <strong>any</strong> references to the original?</p>
  
  <p>Thanks in advance.</p>