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
– gdoron, Commented Feb 14, 2012 at 9:13

Frédéric Hamidi · Accepted Answer · 2012-02-14 22:17:14Z

8

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' }

edited Feb 14, 2012 at 22:17

answered Feb 14, 2012 at 10:21

Frédéric Hamidi

264k42 gold badges497 silver badges486 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sinsedrix · Accepted Answer · 2012-02-14 08:58:53Z

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, 2012 at 8:58

sinsedrix

4,8055 gold badges38 silver badges66 bronze badges

4 Comments

Hadas Over a year ago

@Lijo if youwant to see the difference:see

sinsedrix Over a year ago

Making a recursive merge won't concatenate srting !

sinsedrix Over a year ago

So it seems to wotk now... what is the problem ?

sinsedrix Over a year ago

alert(result2.throwable.text1 +" - "+ result2.throwable.text4 + " - " + result2.text2 + " - " + result2.text3); give me "Ball - Bat - Stump - Umpire"

Alex · Accepted Answer · 2012-02-14 09:00:39Z

1

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.

answered Feb 14, 2012 at 9:00

Alex

2,12616 silver badges15 bronze badges

Collectives™ on Stack Overflow

jQuery Deep/Recursive Copy using $.extend

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related