Question

I dont Why I get this error :

the error is : Unable to get Value of ‘0’ : Object is null or undefined

and this is my code :

var Box = function(width, height, type){
var top = 0,
    right = 0;
this.width = width;
this.height = height;
this.position = {
    top: top,
    right: right,
    set: function(top, right){
        this.top = top;
        this.right = right;
    }
};
this.type = type;
this.area = this.width * this.height;
this.className = "box_" + this.width + "_" + this.height;};

    var box01 = new Box(2, 2, "slideShow");
    var box02 = new Box(2, 1, "clinics");
    var box03 = new Box(1, 2, "articles");
    var box04 = new Box(1, 1, "news");
    var box05 = new Box(2, 1, "news");
    var box06 = new Box(2, 1, "clinics");

    var boxArray = [];
    boxArray.push(box01);
    boxArray.push(box02);
    boxArray.push(box03);
    boxArray.push(box04);
    boxArray.push(box05);
    boxArray.push(box06);



var BoxUtility = function(parentId) {
this.parentId = parentId;
this.boxList = Array.prototype.pop.apply(arguments);
Object.defineProperties(this, {
    totalArea: {
        get: function(){
            var x = 0;
            for(var i = 0, len = this.boxList.length; i <= len - 1; i++){
                x = x + this.boxList[i].area;
            };
            return x;
        }
    },
});};


BoxUtility.prototype.positionCalculateMasonry = function(preDefinedRows, firstColumnWidth, restColumnWidth, itemIndex){
var firstColumnArea = preDefinedRows * firstColumnWidth,
    restColumnArea = preDefinedRows * restColumnWidth,
    firstColumnAreaRemained = firstColumnArea,
    restColumnAreaRemained = restColumnArea,
    Position = function(top, right){
        this.top = top;
        this.right = right;
        this.restFirstWidth = firstColumnWidth - right;
        this.restSecondWidth = restColumnWidth - right;
    },
    firstPosition = new Position(0, 0),
    positionStack = [],
    boxStack = [],
    indexStack = [];

positionStack.push(firstPosition);

for(var i = itemIndex, len = this.boxList.length; i <= len - 1; i++){
    if(this.boxList[i].area <= firstColumnAreaRemained){
        var temp = positionStack.filter(function(el){
            return (el.restFirstWidth >= this.boxList[i].width);
        });
    } else {

    };
};};

var x = new BoxUtility(clinica ,boxArray);
x.positionCalculateMasonry(5, 3, 2, 0);

I get this error here :

return (el.restFirstWidth >= this.boxList[i].width);

I believe its about passing the this keyword in the filter method

any help? thanks

Answer 1

BoxUtility.prototype.positionCalculateMasonry = function(preDefinedRows, firstColumnWidth, restColumnWidth, itemIndex){
var firstColumnArea = preDefinedRows * firstColumnWidth,
    restColumnArea = preDefinedRows * restColumnWidth,
    firstColumnAreaRemained = firstColumnArea,
    restColumnAreaRemained = restColumnArea,
    Position = function(top, right){
        this.top = top;
        this.right = right;
        this.restFirstWidth = firstColumnWidth - right;
        this.restSecondWidth = restColumnWidth - right;
    },
    firstPosition = new Position(0, 0),
    positionStack = [],
    boxStack = [],
    indexStack = [],
    that = this;

positionStack.push(firstPosition);

for(var i = itemIndex, len = this.boxList.length; i <= len - 1; i++){
    if(this.boxList[i].area <= firstColumnAreaRemained){
        var temp = positionStack.filter(function(el){
            return (el.restFirstWidth >= that.boxList[i].width);
        });
    } else {

    };
};};

The problem with posters code is that the context isnt available in the callback. Whats been added is a variable ‘that’ to hold the context. Closures are then used to pass the context into the callback.