Deep copy an array in Angular 2 TypeScript

Question

I have an array of objects that is an input  Lets call it content   When trying to deep copy it  it still has a reference to the previous array   I need to duplicate that input array  and change one property of the duplicated part    So long I ve tried different methods that weren t successful   ES6 way    public duplicateArray       arr       this content    arr map  x    gt   x status   DEFAULT      return this content concat arr       The slice way    public duplicateArray       arr   this content slice 0     arr map  x    gt   x status   DEFAULT      return this content concat arr       In both of them all the objects inside the array have status   Default    What s the best approach to deep copy the array in Angular 2

User · Answer

This is Daria s suggestion  see comment on the question  which works starting from TypeScript 2 1 and basically clones each element from the array   this clonedArray   theArray map e   gt         e

User · Answer

Alternatively  you can use the GitHub project ts-deepcopy  which is also available on npm  to clone your object  or just include the code snippet below           Deep copy function for TypeScript      param T Generic type of target copied value      param target Target value to be copied      see Source project  ts-deepcopy https   github com ykdr2017 ts-deepcopy     see Code pen https   codepen io erikvullings pen ejyBYg     export const deepCopy    lt T gt  target  T   T   gt      if  target     null        return target        if  target instanceof Date        return new Date target getTime    as any        if  target instanceof Array        const cp      as any         target as any    forEach  v    gt    cp push v           return cp map  n  any    gt  deepCopy lt any gt  n   as any        if  typeof target      object   amp  amp  target               const cp         target as    key  string   any      as    key  string   any        Object keys cp  forEach k   gt          cp k    deepCopy lt any gt  cp k                return cp as T        return target

User · Answer

I found deep copy method in angular devkit  It s very normal  so    maybe you can just implement yourself or use that  I prefer to use loadash  there a lot of objects and array operation methods that can use  import   deepCopy   from   angular-devkit core src utils object    export class AppComponent     source                    constructor          const newObject   deepCopy this source          Package                           Version -----------------------------------------------------------  angular-devkit architect         0 1000 8  angular-devkit build-angular     0 1000 8  angular-devkit build-optimizer   0 1000 8  angular-devkit build-webpack     0 1000 8  angular-devkit core              10 0 8  angular-devkit schematics        10 0 8  angular cli                      10 0 8  ngtools webpack                  10 0 8  schematics angular               10 0 8  schematics update                0 1000 8 rxjs                              6 5 5 typescript                        3 9 7 webpack                           4 43 0

User · Answer

A clean way of deep copying objects having nested objects inside is by using lodash s cloneDeep method   For Angular  you can do it like this   Install lodash with yarn add lodash or npm install lodash   In your component  import cloneDeep and use it   import   as cloneDeep from  lodash cloneDeep       clonedObject   cloneDeep originalObject     It s only 18kb added to your build  well worth for the benefits   I ve also written an article here  if you need more insight on why using lodash s cloneDeep

User · Answer

The only solution I ve found  almost instantly after posting the question   is to loop through the array and use Object assign    Like this    public duplicateArray       let arr         this content forEach  x    gt        arr push Object assign     x           arr map  x    gt   x status   DEFAULT      return this content concat arr       I know this is not optimal  And I wonder if there s any better solutions

User · Answer

you can use use JQuery for deep copying    var arr     abc     xyz     var newArr     extend true      arr   newArr shift   shift     console log arr     arr still has    abc     xyz

User · Answer

Simple  let objCopy    JSON parse JSON stringify obj     This Also Works  Only for Arrays  let objCopy2   obj slice

User · Answer

Here is my own  Doesn t work for complex cases  but for a simple array of Objects  it s good enough     deepClone oldArray  Object          let newArray  any           oldArray forEach  item    gt          newArray push Object assign     item                return newArray

User · Answer

Check this     let cloned   source map x   gt  Object assign     x

User · Answer

This is working for me    this listCopy   Object assign     this list

[javascript] Deep copy an array in Angular 2 + TypeScript

Examples related to javascript

Examples related to typescript

Examples related to angular