jquery: extend method with two objects - result is object Object?

Question

I'm doing some jQuery tutorial at jQuery.com and try to understand the extend method right now. it works ALMOST.

var object1 = {
                apple: 0,
                banana: {weight: 52, price: 100},
                cherry: 97
                };

            var object2 = {
                banana: {price: 200},
                durian: 100
                };

            var obj =   $.extend(object1, object2);

            for(var key in obj) {
                alert('key: ' + key + '\n' + 'value: ' + obj[key]);

The alert box gives the following output:

key:apple value:0
key:banana value: [object Object]
key:cherry value: 97
key:durian value: 100

The second key-value-pair should be banana:200. Can somebody explain why it is not? Thanks in advance.

user2193789 · Accepted Answer · 2013-03-24 10:10:33Z

1

The bannana is a object poperty. So if you extend it it will be replace by second. But if you want to update the price and weight properties, you have to code like that

var obj = $.extend(true, object1, object2);

answered Mar 24, 2013 at 10:10

user2193789

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

Comments

saada · Accepted Answer · 2013-03-24 10:04:52Z

0

The alert box simply doesn't show nested objects.

//Use this on your object before you alert
alert(JSON.stringify(myObj));

If you use Chrome or Firebug, you can easily see this output using console.log(myObj) instead of alert. You would need to see the console by pressing Ctrl+Shift+J in Windows.

Hope this helps!

answered Mar 24, 2013 at 10:04

saada

2,8013 gold badges30 silver badges33 bronze badges

Comments

Jivings · Accepted Answer · 2013-03-24 10:02:46Z

0

The object Banana will be:

banana : {
  weight: 52,
  price: 200
}

$.extend will not remove the keys that are not overwritten, it's cleverer than that. So weight still exists.

The reason it shows [object object] is because there is no toString() method and alert doesn't know how to Stringify the banana Object. If you print the values on their own to the console this is what you will see.

answered Mar 24, 2013 at 10:02

Jivings

23.3k7 gold badges63 silver badges102 bronze badges

1 Comment

user2174851 Over a year ago

i'm not to sure yet what i did, but i used the code ElGamed suggested and it kind of worked. but actually weight of banana is not in the alert box, just the price 200.

Royi Namir · Accepted Answer · 2013-03-24 10:07:12Z

It shows you the object because it is object and it doesn't dive in deep.

You can easily test it by adding this :

object2.banana.toString=function (){ return this["price"]; //only for object2's banana. just for demonstrating.

complete code : http://jsbin.com/esobuc/2/edit

var object1 = {
                apple: 0,
                banana: {weight: 52, price: 100},
                cherry: 97
                };

            var object2 = {
                banana: {price: 200},
                durian: 100
                };

object2.banana.toString=function (){ return this["price"]; 
}

            var obj =   $.extend(object1, object2);

            for(var key in obj) {
              alert('key: ' + key + '\n' + 'value: ' + obj[key]);}

Zain Shaikh · Accepted Answer · 2013-03-24 10:16:16Z

0

following should help:

// override banana with its price
object2.banana = object2.banana.price

// merge both objects
var obj = $.extend(object1, object2);

answered Mar 24, 2013 at 10:16

Zain Shaikh

6,0636 gold badges44 silver badges67 bronze badges

Collectives™ on Stack Overflow

jquery: extend method with two objects - result is object Object?

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related