CODEWITHSUNDEEP
jqueryobjectextendfor-in-loop
user2174851
user2174851

Reputation: 15

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

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:

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

Upvotes: 1

Views: 313

Answers (5)

Zain Shaikh
Zain Shaikh

Reputation: 6043

following should help:

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

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

Upvotes: 0

user2193789
user2193789

Reputation:

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

Upvotes: 1

Royi Namir
Royi Namir

Reputation: 148534

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

Upvotes: 0

saada
saada

Reputation: 2761

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!

Upvotes: 0

Jivings
Jivings

Reputation: 23250

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.

Upvotes: 0

Related Questions