How Many Units Will Fit In The Window And Push That Value To An Array

Please Look at my: JSFiddle I have a dataset and I want to push a new value to the array. This value is determined by a sum of an accumulated size is less than the windowSize. Upda

Solution 1:

I updated your fiddle to give you an idea of what's happening. I fixed some missing semicolons and converted the code to log to a <div> in the fiddle window. http://jsfiddle.net/5v5abqzq/3/

It looks like your math is just not what you expect. The first loop through sets the tempGroupSize value, but every loop after that winds up resetting the currentBreakPage back to 0.

Just running this code in the SO Snippet window always returns a negative number for windowWidth - iterator, so the code will always set k = currentBreakPage; which means k = 0. Your for loop always sets var k = currentBreakPage, so you are creating an endless loop depending on your window size.

When I ran this as a jsfiddle, I did get a larger number, but then currentBreakPage would be stuck at 1 because of this code always evaluating to false: if(tempGroupSize < (windowWidth - iterator)){

Check your algorithm and math, and verify what you are trying to do.

**EDIT: Here's the new fiddle. I updated the tempGroupSize = 0;: http://jsfiddle.net/5v5abqzq/6/

var logger = {
    log: function (text){
        var _console = document.getElementById('console');
        _console.innerHTML = _console.innerHTML + '<br />' + text;
    }
};

var windowWidth = window.innerWidth;
var tempGroupSize = 0,
    currentBreakPage = 0,
    iterator = '';
logger.log('win' + windowWidth);
var data = [{
    "size": {
        "original": {
            "height": 2857,
            "width": 100
        },
        "updated": {
            "width": 10,
            "height": 1027,
            "isPortrait": false
        }
    },
    "ratio": 0.7000350017500875,
    "pageGroup": []
}, {
    "size": {
        "original": {
            "height": 2857,
            "width": 200
        },
        "updated": {
            "width": 100,
            "height": 1027,
            "isPortrait": false
        }
    },
    "ratio": 0.7000350017500875,
    "pageGroup": []
}, {
    "size": {
        "original": {
            "height": 2857,
            "width": 2000
        },
        "updated": {
            "width": 100,
            "height": 1027,
            "isPortrait": false
        }
    },
    "ratio": 0.7000350017500875,
    "pageGroup": []
}, {
    "size": {
        "original": {
            "height": 2857,
            "width": 200
        },
        "updated": {
            "width": 100,
            "height": 100,
            "isPortrait": false
        }
    },
    "ratio": 0.7000350017500875,
    "pageGroup": []
}, {
    "size": {
        "original": {
            "height": 2857,
            "width": 100
        },
        "updated": {
            "width": 50,
            "height": 50,
            "isPortrait": false
        }
    },
    "ratio": 0.7000350017500875,
    "pageGroup": []
}, {
    "size": {
        "original": {
            "height": 2857,
            "width": 300
        },
        "updated": {
            "width": 200,
            "height": 200,
            "isPortrait": false
        }
    },
    "ratio": 0.7000350017500875,
    "pageGroup": []
}, {
    "size": {
        "original": {
            "height": 2857,
            "width": 400
        },
        "updated": {
            "width": 100,
            "height": 1027,
            "isPortrait": false
        }
    },
    "ratio": 0.7000350017500875,
    "pageGroup": []
}, {
    "size": {
        "original": {
            "height": 2857,
            "width": 500
        },
        "updated": {
            "width": 200,
            "height": 1027,
            "isPortrait": false
        }
    },
    "ratio": 0.7000350017500875,
    "pageGroup": []
}];
logger.log(data.length);

for (var i = 0; i < data.length; i++) {
    for(var k = currentBreakPage; k < data.length; k++){
        
        if(currentBreakPage === 0){
           // console.log('break is:', 0);
            iterator = data[i].size.updated.width;
            logger.log(iterator);
            //console.log(iterator);
        } else {
            //console.log('break is else:', currentBreakPage);
            iterator = data[currentBreakPage].size.updated.width
            logger.log('currentBreakPage: ' + currentBreakPage);
        }
        
        logger.log('tempGroupSize: ' + tempGroupSize + ', (windowWidth - iterator): ' + (windowWidth - iterator) + ', result: ' + (tempGroupSize < (windowWidth -  iterator)) );
        
        if(tempGroupSize < (windowWidth -  iterator)){
            tempGroupSize += data[k].size.updated.width;

            logger.log('setting temp group size to ' + tempGroupSize);         
            
        } else {
            
            currentBreakPage = k;
            logger.log('currentBreakPage: ' + currentBreakPage);
            data[i].pageGroup.push(tempGroupSize);
            tempGroupSize = 0;
            
            break;
        }
    
       
        
    }
    logger.log('pageGroup' + currentBreakPage);
}

    

<divid="console"></div>

Solution 2:

Change break to be k = data.length

If you ever want to stop a loop, just make your iterator go out of bounds so it doesn't go through the loop again.

Solution 3:

Well break just exits the loop in which it is present

for(j=0;j<val1;j++)
{
for(k=0;k<val2;k++)
{
if(condition)
break;
}
//after break you will be here in second loop
}