In a code below:

var FilledObjectArray = function() {
    this.filledObject = {};
};

FilledObjectArray.prototype = {
        fill: function() {
            this.filledObject["one"] = 1;
        }
};

var SomeClass = function() {
    this.something = new FilledObjectArray();
};

SomeClass.prototype = {
    showContents: function() {
        this.something.fill();
        for (key in this.something) {
            $("#some-div").append(this.something[key]);
        }
    }   
};

$(document).ready(function() {

    var s = new SomeClass();

    $(".bla").each(function() {
        $(this).click(function() {
            s.showContents();
        });
    });

});

I'm getting this error in Firebug console:

TypeError: this.filledObject is undefined
this.filledObject["one"] = 1;

What I'm doing wrong here? From what I understand object is properly initialized and value assigning is correct. I'm testing this in Firefox 18.0.2 version and Chrome 25.

In a code below:

var FilledObjectArray = function() {
    this.filledObject = {};
};

FilledObjectArray.prototype = {
        fill: function() {
            this.filledObject["one"] = 1;
        }
};

var SomeClass = function() {
    this.something = new FilledObjectArray();
};

SomeClass.prototype = {
    showContents: function() {
        this.something.fill();
        for (key in this.something) {
            $("#some-div").append(this.something[key]);
        }
    }   
};

$(document).ready(function() {

    var s = new SomeClass();

    $(".bla").each(function() {
        $(this).click(function() {
            s.showContents();
        });
    });

});

I'm getting this error in Firebug console:

TypeError: this.filledObject is undefined
this.filledObject["one"] = 1;

What I'm doing wrong here? From what I understand object is properly initialized and value assigning is correct. I'm testing this in Firefox 18.0.2 version and Chrome 25.

• javascript
• jquery

• I think that this. in this.filledObject["one"] = 1; refers to the closure and not to the FilledObjectArray – BlackFire27 Commented Feb 27, 2013 at 10:26
• Is this an instance where its worth while creating a self reference to avoid confusion about what this is at any given point? – Jon Egerton Commented Feb 27, 2013 at 10:31
• What's the stack trace of the error? I don't get an exception when executing s.showContents() - I only can spot the inconsistency that Kevin detected (yet that would lead to another error). – Bergi Commented Feb 27, 2013 at 11:24

4 Answers 4

I think this should solve your problem

this.something.fill.call(this.something);

I found this issue with the existing code and have created a proposed solution, however I'm not exactly clear on your intent so it may be a little different than your needs, please modify as needed.

The Issue

The main issue stems from the FilledObjectArray object. This object's prototype is assigned a function fill and then assigned a property one of type int with a value of 1. So remember this object has two properties, one a function one an int.

So when you execute this code...

for (key in this.something) {
    $("#some-div").append(this.something[key]);  //Item 1
}

Two iterations of the loop occur, once for the function fill and once for the property one. The issue occurs on the iteration for the fill key, since this.something[key] is passed to the append(), which cann accept functions, causing jQuery to trigger the function. When this occurs, within the execution context of the fill function, this is assigned to #some-div, which does not have a filledObject property, causing the TypeError to be thrown. I have mented on some of this below:

var FilledObjectArray = function() {
    this.filledObject = {}; //Fill is an object
};

FilledObjectArray.prototype = {
        fill: function() {
            this.filledObject["one"] = 1;
        }
};

var SomeClass = function() {
    this.something = new FilledObjectArray();
};

SomeClass.prototype = {
    showContents: function() {
        this.something.fill();
        for (key in this.something) {
            $("#some-div").append(this.something[key]);  //The fill function is called here
        }
    }   
};

$(document).ready(function() {

    var s = new SomeClass();

    $(".bla").each(function() {
        $(this).click(function() {
            s.showContents();
        });
    });

});

Proposed Solution

var FilledObjectArray = function() {
    this.filledObject = [];
};

FilledObjectArray.prototype.fill = function(){
            console.log(this);
            this.filledObject[0] = 1;
};

var SomeClass = function() {
    this.something = new FilledObjectArray();
};

SomeClass.prototype = {
    showContents: function() {
        this.something.fill();
        for (var x = 0; x < this.something.filledObject.length; x++){
            $("#some-div").append(this.something.filledObject[x]);
        }
    }   
};

$(document).ready(function() {


    var s = new SomeClass();
    $(".bla").each(function() {

        $(this).click(function() {
            s.showContents();
        });
    });
});

i think you looking for this:

for (key in this.something) {
  if(this.something.hasOwnProperty(key)){
    $("#some-div").append(JSON.stringify(this.something[key]));
  }
}

jsbin

you need use hasOwnProperty to iterate over the properties of an object without executing on inherit properties.

I feel a bit dumb right now but here is the solution to this:

SomeClass.prototype = {
    showContents: function() {
        this.something.fill();
        for (key in this.something.filledObject) {
            if (this.something.filledObject.hasOwnProperty(key)) {
                $("#some-div").append(this.something.filledObject[key]);                
            }
        }
    }   
};

I was trying to access object itself (this.something) instead of object property (this.something.filledObject)