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!