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.

Answer 1

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!

Answer 2

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);

Answer 3

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.

Answer 4

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]);}

Answer 5

following should help:

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

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