javascript - Split an array with sub arrays into separate arrays if the line count exceed $x -

i have array of example data i'm trying split 2 columns paginate on data.

basically, i'm building directory listing , need display 2 columns of data.

if data long page one, split data array , display on page.

the directory listing shows tenantname , suitenumber on 1 line if includeoccupants = y, list occupant array below tenantname.

the problem comes in when displaying data. can have 18 total rows in each column, if there 22 occupants, list needs break , show on next column. i've hacked few solutions nothing worth posting example.

my general thinking should iterate on list using loop , inside loop, iterate on occupants array. using counter, increment counter every tenant , occupant , if number gets bigger 18, break loop. issue creating second, 3rd, , possibly 4th arrays of data based on supplied array of tenants.

var directory_data = '[{"tenantname":"u.s. trust","suitenumber":201,"occupants":[""],"includeoccupant":"","floor":2},{"tenantname":"bank of america","suitenumber":201,"occupants":[""],"includeoccupant":"","floor":2},{"tenantname":"ubs financial services","suitenumber":250,"occupants":[""],"includeoccupant":"","floor":2},{"tenantname":"summit advisory group","suitenumber":300,"occupants":[""],"includeoccupant":"","floor":3},{"tenantname":"beechler tomberlin, pllc.","suitenumber":305,"occupants":[""],"includeoccupant":"","floor":3},{"tenantname":"profitstarts, jack henry company","suitenumber":310,"occupants":[""],"includeoccupant":"","floor":3},{"tenantname":"nagle & associates","suitenumber":320,"occupants":["carl b. nagel","tom williams","kenneth allen","e. lee hicks, jr.","thomas r. gladden, jr.","david carr"],"includeoccupant":"y","floor":3},{"tenantname":"reginald f. combs, p.c.","suitenumber":330,"occupants":[""],"includeoccupant":"","floor":3},{"tenantname":"metlife","suitenumber":340,"occupants":["","bridges wealth management","creative group management"],"includeoccupant":"y","floor":3},{"tenantname":"baird private wealth management","suitenumber":350,"occupants":["","jon bolton","steve rowell","scott wray","jeff trollinger","karver bolton"],"includeoccupant":"y","floor":3},{"tenantname":"novant asset management company","suitenumber":400,"occupants":[""],"includeoccupant":"","floor":4},{"tenantname":"movement mortgage llc","suitenumber":410,"occupants":[""],"includeoccupant":"","floor":4},{"tenantname":"merrill lynch","suitenumber":430,"occupants":["matthew bee","berverly burke, crpc ®","christy campbell","todd h. chase","forrest c. childers, cfp®","kelly dwyer","michael e. forsyth, crpc®","vance l. horner ii, cfa","robert hunt","carlyle kinlaw. cfa","brett c. ledgerwood","vicky leonard","robert p. maltzahn","lucia j. marshall, cfp®","adolfo john (a.j.) montesa ii, crpc®","nathan a. moser","david l. neugent, cfp®","j. keith norman, cima®, cfp®","elias h. pegram, jr.","lorie pilon","brad pitts, cfp®","e. lee raymer","john c. setzer, residnet direcotr","jobeth p. souza, crpc®","william c. taylor","marcia turnage","tammy watts-quesinberry","robert p. whaling, jr. ","scott k. young, crp®"],"includeoccupant":"y","floor":4},{"tenantname":"baird institutional fixed income","suitenumber":440,"occupants":[""],"includeoccupant":"","floor":4},{"tenantname":"metcalf & beal, attorneys @ law","suitenumber":450,"occupants":["w. eugene metcalf","christopher l. beal","lauren m. vocci"],"includeoccupant":"y","floor":4},{"tenantname":"iri","suitenumber":460,"occupants":[""],"includeoccupant":"","floor":4},{"tenantname":"nelson, mullins, riley, scarborough, llp. attorneys @ law","suitenumber":530,"occupants":["cassie l. crawford","candace s. friel","denise m. gunter","donald r. pocock","mark a. stafford"],"includeoccupant":"y","floor":5},{"tenantname":"oppenheimer & co., inc. ","suitenumber":560,"occupants":["","william p. greathouse, jr. ","tanner g. robinson","gregory scotiniadis","eugene gray smith","jerry e. smith"],"includeoccupant":"y","floor":5},{"tenantname":"bowen, hanes & company, inc.","suitenumber":570,"occupants":[""],"includeoccupant":"","floor":5},{"tenantname":"wells fargo advisors","suitenumber":600,"occupants":["alex galloway","allen gillespie","cyndi gross","clay canady","conrad graham","daniel choplin","danny riazzi","ed irvin","fronie martin","janet sidden","jim kluttz","joe rhyne","john bates","john cox","john martin","keary didier","larry hand","mike dowell ","neal robinson","pat crowley","pat riazzi","paul glenn","robert nichols","scott settelen","stacy dillion","sterling swaim","tim barnes","todd lynch","tom goodson","wes perry ","will goodson"],"includeoccupant":"","floor":6},{"tenantname":"john w. burress","suitenumber":610,"occupants":[""],"includeoccupant":"","floor":6},{"tenantname":"paul fulton","suitenumber":610,"occupants":[""],"includeoccupant":"","floor":6},{"tenantname":"liipfert law group","suitenumber":620,"occupants":["b. bailey liipfert, iii","j. benjamin limehouse"],"includeoccupant":"y","floor":6},{"tenantname":"wells law, pllc.","suitenumber":640,"occupants":[""],"includeoccupant":"","floor":6},{"tenantname":"goodson & nichols financial group","suitenumber":650,"occupants":[""],"includeoccupant":"","floor":6},{"tenantname":"allman, spry, davis, leggett & crumpler p.a. attorneys & legal counsel","suitenumber":700,"occupants":["c. edwin allman, iii","m. joseph allman","kim r. bonuomo","t. terry crumpler","joslin davis","bernard m. desrosiers","jodi d. hildebran","scott t. horn","george d. humphrey, iii","r. bradford leggett","karen b. malay","george t. mann","marsh prause","bennett rainey","edward e. raymer","kayla sipprell","donald voncannon","anna warburton munroe"],"includeoccupant":"y","floor":7}]';  directory_data = json.parse(directory_data);  var tenant_count = directory_data.length;  sorted_data = directory_data.sort(function(a, b) {     return a.suitenumber - b.suitenumber; });   var line_total = 0; var arrays = [];  var remaining_data = [];  (var tenants in sorted_data) {     var tenant = sorted_data[tenants];     if (line_total >= 20) {         break;     } else {          line_total++;         array.push({'tenant':tenant.tenantname,'occupants':[]});          if (tenant.includeoccupant === 'y') {             (var occupants in tenant.occupants) {                 var occupant = tenant.occupants[occupants];                 if (line_total <= 20) {                     array[tenants].occupants.push(occupant);                     line_total++;                 } else {                     remaining_data.push({'tenant':tenant.tenantname, 'occupants':[occupant]})                 }             }         }     } } 

the code above doesn't work because i'm pushing stuff remaining_data incorrectly , quite frankly, believe there better ways go whole thing -- why didn't want post code not skew answers.

as outcome of i'm looking for.

if there 20 tenants , 2 tenants have 10 occupants each, thats 40 total lines. since can have 36 total lines.. function should take 40 total lines, , split 2 or more arrays while maintaining tenant , occupant structure.

its simple:

define settings, , create pages.

i think code self explainable

var array = [6,7,8,1,2,3,4,5];  array.sort()    var pages = [];  var page = 0;  var perpage = 3;  var currentidx = 0;  while(true) {    currentidx = perpage * page;    if (currentidx >= array.length) break;       pages.push(      array.slice(currentidx, currentidx + perpage)    )        page++;  }    console.log(pages)    // occupants.. suitenumber     var occupants = data.reduce(function(occupantsarray, item) {    item.occupants.foreach(function(occupant) {      occupant.suitenumber = item.suitenumber;      occupantsarray.push(occupant)    })  }, [])    occupants // [{suitnumber: xx, occupantsdata..}, {}]