jQuery Deep/Recursive Copy using $.extend

Question

I am trying to merge two objects using jQuery $.extend.

Using the following code, I am trying to alert ( “Ball – Stump - Umpire”). But the current output is ( “Undefined – Stump - Umpire”). It does not achieve the deep (recursive) copy. How do we correct this?

 $(document).ready(function () {

        debugger;

        //$.extend
        var obj3 = { throwable: { text1: 'Ball' }, text3: 'Umpire' };
        var obj4 = { throwable: { text4: 'Bat' }, text2: 'Stump' }

        //Simple Copy
        var result1 = $.extend(obj3, obj4);
        //alert(result1.throwable.text4 + " - " + result1.text2 + " - " + result1.text3);


        //Deep Copy
        //First parameter is passed as Boolean true to accomplish deep (recursive) copy
        var result2 = $.extend(true, obj3, obj4);
        alert(result2.throwable.text1 + " - " + result2.text2 + " - " + result2.text3);


    });

EDIT: I referred

(Deep) copying an array using jQuery

How is **one** of those: `asp.net` `.net` `jquery-ui` `jquery-plugins` tags related to the question? — gdoron, Feb 14 '12 at 09:13

Frédéric Hamidi · Accepted Answer · 2012-02-14T22:17:14.287

Your second code snippet does work as expected and performs a deep copy of obj4 into obj3, when run in isolation.

The problem is, the previous code snippet has already performed a shallow copy of obj4 into obj3, completely overriding its throwable member with obj4's in the process. Therefore, throwable.text1 does not exist anymore within obj3 after that code has run.

Initially, obj3 is :

{ throwable: { text1: 'Ball' }, text3: 'Umpire' }

After the first code snippet has run, obj3 becomes :

{ throwable: { text4: 'Bat' }, text3: 'Umpire', text2: 'Slump' }

Finally, after the second code snippet has run, obj3 still is:

{ throwable: { text4: 'Bat' }, text3: 'Umpire', text2: 'Slump' }

score 1 · Answer 2 · answered Feb 14 '12 at 08:58

1

In your code, text1 property is overwritten by extend. I f you want a method that contacenates strings, code your own, extend don't do that.

Something like:

function(o1, o2) {
  var ores = {};
  for(var p in o1) ores.p = o1.p;
  for(var p in o2) ores.p = ores.p ? ores.p+o2.p : o2.p;
  return ores;
}

answered Feb 14 '12 at 08:58

sinsedrix

4,336
4
29
53

@Lijo if youwant to see the difference:[see](http://api.jquery.com/jQuery.extend/) – Hadas Feb 14 '12 at 09:03
Making a recursive merge won't concatenate srting ! – sinsedrix Feb 14 '12 at 09:05
So it seems to wotk now... what is the problem ? – sinsedrix Feb 14 '12 at 09:21
`alert(result2.throwable.text1 +" - "+ result2.throwable.text4 + " - " + result2.text2 + " - " + result2.text3);` give me "Ball - Bat - Stump - Umpire" – sinsedrix Feb 14 '12 at 09:35

score 1 · Answer 3 · answered Feb 14 '12 at 09:00

The problem is, that there are two properties with the same name in the objects: text1. Even with deep extends, jquery extend doesn't merge this into a new concat string or an array.

Deep copy is relevant, if one of your properties is another object. With deep extend, all properties of the child object get merged and not just the child object itself.

I think you have to go with your own extend function.

jQuery Deep/Recursive Copy using $.extend

3 Answers3