CODEWITHSUNDEEP
javascript
BarryBones41
BarryBones41

Reputation: 1481

Javascript Console Log reporting object properties incorrectly

This could be a problem with JS Fiddle, but I am using console.log() to print the values of a collection of objects.

First I initialize the object collection with some data (some objects) and console log it.

Then I update this collection with some new data and console log it.

What is happening is that the first and second console logs are both identical, even though the object data was changed. I would like to know if this is a bug, or if I am doing something wrong.

http://jsfiddle.net/n302nsbh/18/

function FooManager() {
    this.objects = {};

    this.update = function(data) {
        var self = this;
        $.each(data, function(i, e) {
            var foo = self.objects[i];
            if (typeof foo === "undefined") {
                foo = new Foo(e);
                self.objects[i] = foo;
            } else if (foo instanceof Foo) {
                foo.update(e);
            }
        });
    }
    return this;
}

function Foo(data) {
    this.name = data.name;
    this.age = data.age;
    return this;
}

Foo.prototype.update = function(data) {
    this.name = data.name;
    this.age = data.age;
}

//------ Update 1 --------//

var appData = {
    "0": {
        name: "a",
        age: 2
    },
    "1": {
        name: "b",
        age: 3
    }
}

var fooManager = new FooManager();
fooManager.update(appData);
console.log(fooManager.objects);

//------ Update 2 --------//

var newAppData = {
    "0": {
        name: "a",
        age: 443
    }
}

fooManager.update(newAppData);
console.log(fooManager.objects);

Both update 1 and update 2 logs are identical!

Upvotes: 4

Views: 591

Answers (1)

Reeno
Reeno

Reputation: 5705

The browser doesn't save the whole object when you call console.log(), just a reference to it. When you inspect it later, the browser will get the current version of the object.

You can test this quite simple by appending a new element to the object.

Call this at the end:

var newAppData = {
    "2": {
        name: "a",
        age: 443
    }
}

In the console it'll show up as

Object {0: Foo, 1: Foo}
Object {0: Foo, 1: Foo, 2: Foo}

but when you open the first log entry, you will see all three elements, so the browser inspects the current version.

Demo: https://jsfiddle.net/n302nsbh/22/

Solution 1

To see the current version of an element of the object, directly refer to it with console.log(fooManager.objects[0]); This will output for your script:

Foo {name: "a", age: 2}
Foo {name: "a", age: 443}

Demo: https://jsfiddle.net/n302nsbh/23/

Solution 2

Just found another nice solution at https://stackoverflow.com/a/7389177/1682509

Use console.log(JSON.parse(JSON.stringify(fooManager.objects))); to get a browsable snapshot.

Demo: https://jsfiddle.net/n302nsbh/24/

Upvotes: 7

Related Questions