Question

90

Deep copying array of nested objects in javascript

rated 0 times [ 94] [ 4] / answers: 1 / hits: 28845 / 9 Years ago, thu, march 5, 2015, 12:00:00

I am trying to deep copy array of nested objects in javascript. My array look like this

var arr = [{name:adam,age:21},

    {name:freddie,age:35,children:[{name:mercury,age:25}]},

    {name:jim,age:35,children:[{name:morrison,age:25,children:[{name:some, age:40}]}]}

    ];

I want to make a deep copy of every object inside the array that is i want to create a exact copy of arr into new array which should not have object reference. Depth of array is also unknown that is children array can be upto any level.
I have gone through this link
Copying of an array of objects to another Array without object reference in javascript(Deep copy) but that did not help me. I googled and found some solutions in jQuery but that did not help me as i dont have knowledge of jQuery.

I also tried implementing it with recursion but that's not working too
http://ideone.com/kJi5X3

I want to do it in javascript only without using jQuery or anything. I am new to JavaScript so i may have missed if there is any library or simple method to do this.
Please help me to solve this problem. Thanks in advance.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

masonm

Add To Favorites

Follow

Total Points: 167

Total Questions: 87

Total Answers: 103

Location: Rwanda

Member since Wed, Jun 8, 2022

2 Years ago

masonm questions

1 Exceptional regex for email id validation in JavaScript

Mon, May 3, 21, 00:00, 3 Years ago

1 Bootstrap Carousel - Autoplay video on active slide

Sat, Nov 7, 20, 00:00, 4 Years ago

1 TS2322: Type 'number' is not assignable to type 'bigint

Mon, Oct 12, 20, 00:00, 4 Years ago

1 Vue Router passing props to dynamic routes, unclear documentation

Sun, Aug 9, 20, 00:00, 4 Years ago

1 Async await function not executing within an event listener

Wed, Dec 18, 19, 00:00, 5 Years ago

View All

answered 9 Years ago kelsy · Accepted Answer

You have two main options:

Use JSON.stringify and JSON.parse:

 var copy = JSON.parse(JSON.stringify(original));

But I've never liked that. A round-trip through text is inefficient at best, and it won't handle functions or Date, RegExp, undefined, etc. values correctly unless you write a replacer and a reviver.

Use a recursive function, something like this:

var toString = Object.prototype.toString;

function deepCopy(obj) {

    var rv;



    switch (typeof obj) {

        case object:

            if (obj === null) {

                // null => null

                rv = null;

            } else {

                switch (toString.call(obj)) {

                    case [object Array]:

                        // It's an array, create a new array with

                        // deep copies of the entries

                        rv = obj.map(deepCopy);

                        break;

                    case [object Date]:

                        // Clone the date

                        rv = new Date(obj);

                        break;

                    case [object RegExp]:

                        // Clone the RegExp

                        rv = new RegExp(obj);

                        break;

                    // ...probably a few others

                    default:

                        // Some other kind of object, deep-copy its

                        // properties into a new object

                        rv = Object.keys(obj).reduce(function(prev, key) {

                            prev[key] = deepCopy(obj[key]);

                            return prev;

                        }, {});

                        break;

                }

            }

            break;

        default:

            // It's a primitive, copy via assignment

            rv = obj;

            break;

    }

    return rv;

}

var a = [1, {foo: bar}, ['a', 'b'], new Date()];

snippet.log(JSON.stringify(a));

var b = deepCopy(a);

snippet.log(JSON.stringify(b));

<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->

<script src=http://tjcrowder.github.io/simple-snippets-console/snippet.js></script>

Note that the above uses ES5 features present on all modern browsers but not some older ones, like IE8. All of the features used above can be polyfilled, however, for older browsers.

That doesn't try to get into handling custom constructor functions or preserving prototypes on objects in the array; doing so makes things dramatically more complicated and impossible to make perfect without a convention for how to call those constructors for a copy operation. You can get close by assigning the same prototype, but that wouldn't account for logic within the constructor function and in particular for functions set up as closures within it.