如果行数超过$ x，将具有子阵列的阵列拆分为单独的阵列

Question

我有一个array of example data，我试图将其分成两列，然后对数据进行分页。

基本上，我建立一个目录列表，并需要显示两列数据。

如果页面1的数据太长，它会将数据拆分成另一个数组并显示在另一个页面上。

的目录列表显示在一行tenantName和suiteNumber然后如果includeOccupants = Y，会列出occupant阵列tenantName下方。

显示此数据时出现问题。每列只能有18行，因此如果有22位居民，列表需要打破并显示在下一列。我一起砍了几个解决方案，但没有任何值得发布的例子。

我的一般想法是，我应该使用for循环和for循环内迭代列表，遍历占据数组。使用计数器，为每个租户和乘员增加计数器，如果该数字大于18，则打破循环。我的问题是根据所提供的租户数组创建第二，第三和第四个数据数组。

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, A 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 at 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 at 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 = []; 

for (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') { 
      for (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]}) 
       } 
      } 
     } 
    } 
} 

上面的代码不工作，因为我推着东西REMAINING_DATA错误很坦率地说，我认为有更好的方法去这件事了 - 这就是为什么我真的不想发布代码以避免歪曲答案。

至于我正在寻找的结果。

如果有20个租户，两个租户各有10个住户，那就是40个总线。因为我只能有36条总线。这个函数应该占用40条总线，并将它分成两个或更多的阵列，同时保持租户和乘员结构。

Answer 1

检查此代码。

在这里，我正在做过滤器来整理不必要的数据。

然后做地图，使数据格式化。

var 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, A 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 at 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 at 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}]'; 
 

 
data = JSON.parse(data); 
 
data = data.sort(function(a, b) { 
 
    return a.suiteNumber - b.suiteNumber; 
 
}); 
 

 
var tenantsOccupants = {}; 
 

 
data.forEach(function(item) { 
 
    if(item.includeOccupant !== 'Y') {return;} 
 

 
    if(!tenantsOccupants[item.tenantName]) { 
 
    tenantsOccupants[item.tenantName] = []; 
 
    } 
 
    
 
    item.occupants.forEach(function(occupant) { 
 
    tenantsOccupants[item.tenantName].push(occupant); 
 
    }); 
 
}); 
 

 
console.log(tenantsOccupants);

Answer 2

它简单：

定义设置，创建你的页面。

我觉得代码是自解释的

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) 
 

 
// Get the occupants.. with suiteNumber 
 

 
var occupants = data.reduce(function(occupantsArray, item) { 
 
    item.occupants.forEach(function(occupant) { 
 
    occupant.suiteNumber = item.suiteNumber; 
 
    occupantsArray.push(occupant) 
 
    }) 
 
}, []) 
 

 
occupants // [{suitNumber: xx, occupantsData..}, {}]