如何使用嵌套分组对数组进行分页？答案

【问题标题】：How to paginate array with nested groupings?如何使用嵌套分组对数组进行分页？
【发布时间】：2020-01-18 15:18:14
【问题描述】：

我有以下按颜色和数量属性分组的数据。

var data = {
  green: {
    "1000": [
      { type: 'apple', color: 'green', quantity: 1000 }, 
      { type: 'grape', color: 'green', quantity: 1000 }
    ]
  },
  red: {
    "2000": [
      { type: 'apple', color: 'red', quantity: 2000 }
    ],
    "4000": [
      { type: 'grape', color: 'red', quantity: 4000 }
    ]
  }
};

现在我想对这些数据进行分页。因此，如果页面大小等于 1 项，我的第一页将包含

 { type: 'apple', color: 'green', quantity: 1000 }

秒：

 { type: 'grape', color: 'green', quantity: 1000 }

等等。我怎么能这样做？提前致谢。

【问题讨论】：

标签： javascript arrays pagination

【解决方案1】：

您想先“展平”数据。为此，您可以使用Object.values() 将对象值作为数组获取。这需要对每个嵌套对象进行。然后，可以选择使用.flatMap() 和flat()，或者简单地循环遍历内部值并附加到数组中。（我更喜欢平面方法，因为它们避免了副作用）最后，一些其他功能的组合来完成分页......这可能包括Array.slice()。

例如：

const data = {
  green: {
    '1000': [
      {type: 'apple', color: 'green', quantity: 1000},
      {type: 'grape', color: 'green', quantity: 1000},
    ],
  },
  red: {
    '2000': [
      {type: 'apple', color: 'red', quantity: 2000},
    ],
    '4000': [
      {type: 'grape', color: 'red', quantity: 4000},
    ],
  },
}

// Flatten the list (still needs polyfill in IE/Edge today)
const items = Object.values(data).flatMap(
  color => Object.values(color).flat()
)
/*
// Alternatively...
const items = []
Object.values(data).forEach(color => {
  Object.values(color).forEach(list => {
    list.forEach(obj => {
      items.push(obj)
    })
  })
})
*/

const paginate = (items, page, pageSize) => {
  const startIndex = (page - 1) * pageSize
  const endIndex = Math.min(page * pageSize, items.length - 1)
  return items.slice(startIndex, endIndex)
}

console.log(paginate(items, 1, 2))
console.log(paginate(items, 2, 2))

【讨论】：

【解决方案2】：

我们可以将数据转换成数组，然后创建分页函数。

Object.values() 可用于将所有值放入数组中。 Array.slice() 可用于创建分页函数，该函数返回一个以页码为键、以要显示的项目为值的对象。

var data = { green: { "1000": [ { type: 'apple', color: 'green', quantity: 1000 }, { type: 'grape', color: 'green', quantity: 1000 } ] }, red: { "2000": [ { type: 'apple', color: 'red', quantity: 2000 } ], "4000": [ { type: 'grape', color: 'red', quantity: 4000 } ] } };

var results = [];

Object.values(data).forEach(item => {
  Object.values(item).forEach(value => {
    results = results.concat(value);
  });
});

function paginate(results, pageSize) {
  let pages = {}, pageNum = 1, i = 0;
  let totalPages = results.length / pageSize;
  let rem = results.length % pageSize;      
  
  while (pageNum <= totalPages) {
    pages[pageNum] = results.slice(i, i + pageSize);
    i += pageSize;
    pageNum++;
  }
   
   if (rem > 0) {
     pages[pageNum] = results.slice(i);
   }
   
  return pages;
}

console.log("Page size of 1:");
console.log(paginate(results, 1));

console.log("Page size of 2:");
console.log(paginate(results, 2));

console.log("Page size of 3:");
console.log(paginate(results, 3));

【讨论】：