Question

我需要帮助来显示按日期分组的数组项。我有以下几个项目的数组，每个项目都有“今天”字段。

var originalArray = [
        {title: "New Three 123", status: "pending", isDone: false, today: "2018-02-20T16:40:17.759Z", _id: "Eyt44n1svxIjOn5Y"},
        {title: "My First card", status: "pending", isDone: false, today: "2018-02-21T13:00:13.979Z", _id: "UlSoOrLBjX2RldgQ"},
        {title: "Sun Pharma", status: "completed", isDone: true, today: "2018-02-20T16:41:19.040Z", _id: "VbBEyndCIhPDB1Uf"},
        {title: "Design News", status: "pending", isDone: false, today: "2018-02-21T13:00:07.730Z", _id: "rpW4bVIYWjlPMgk6"},
        {title: "Amul India sddsd", status: "pending", isDone: false, today: "2018-02-20T16:41:13.087Z", _id: "uyISWNb7vapmRrNG"}
        ]

必需的输出是需要按数组项目的“今天”键字段中写入的日期对记录进行分组：

var outputRequired = {
'2018,2,20' : [
    {title: "New Three 123", status: "pending", isDone: false, today: "2018-02-20T16:40:17.759Z", _id: "Eyt44n1svxIjOn5Y"},     
    {title: "Sun Pharma", status: "completed", isDone: true, today: "2018-02-20T16:41:19.040Z", _id: "VbBEyndCIhPDB1Uf"},       
    {title: "Amul India sddsd", status: "pending", isDone: false, today: "2018-02-20T16:41:13.087Z", _id: "uyISWNb7vapmRrNG"}
],
'2018,2,21' : [
    {title: "My First card", status: "pending", isDone: false, today: "2018-02-21T13:00:13.979Z", _id: "UlSoOrLBjX2RldgQ"},
    {title: "Design News", status: "pending", isDone: false, today: "2018-02-21T13:00:07.730Z", _id: "rpW4bVIYWjlPMgk6"}
]

}

请指导我如何实现此输出。

谢谢， Jignesh Raval

Answer 1

您可以使用.reduce来获得所需的结果。将initialValue设置为{}，并在每次迭代中检查日期键是否存在。如果它存在附加到数组或者在accumulator中创建一个新数组。

var data = originalArray.reduce(
  (acc, el)=>{
    var today = el.today.split("T")[0].replace(/-/g, ",");
    if(acc.hasOwnProperty(today)) acc[today].push(el);
    else acc[today] = [el];
    return acc;
  }, {}
)

请参阅此处的工作代码：

＆＃13;

var originalArray = [{
    title: "New Three 123",
    status: "pending",
    isDone: false,
    today: "2018-02-20T16:40:17.759Z",
    _id: "Eyt44n1svxIjOn5Y"
  },
  {
    title: "My First card",
    status: "pending",
    isDone: false,
    today: "2018-02-21T13:00:13.979Z",
    _id: "UlSoOrLBjX2RldgQ"
  },
  {
    title: "Sun Pharma",
    status: "completed",
    isDone: true,
    today: "2018-02-20T16:41:19.040Z",
    _id: "VbBEyndCIhPDB1Uf"
  },
  {
    title: "Design News",
    status: "pending",
    isDone: false,
    today: "2018-02-21T13:00:07.730Z",
    _id: "rpW4bVIYWjlPMgk6"
  },
  {
    title: "Amul India sddsd",
    status: "pending",
    isDone: false,
    today: "2018-02-20T16:41:13.087Z",
    _id: "uyISWNb7vapmRrNG"
  }
];

var data = originalArray.reduce(
  (acc, el)=>{
    var today = el.today.split("T")[0].replace(/-/g, ",");
    if(acc.hasOwnProperty(today)) acc[today].push(el);
    else acc[today] = [el];
    return acc;
  }, {}
)

console.log(data);

＆＃13;

Answer 2

如果你想在没有外部lib的情况下这样做，试试这个：

var groupBy = function(xs, key) {
  return xs.reduce(function(rv, x) {
    (rv[x[key]] = rv[x[key]] || []).push(x);
    return rv;
  }, {});
};
var originalArray = [
        {title: "New Three 123", status: "pending", isDone: false, today: "2018-02-20T16:40:17.759Z", _id: "Eyt44n1svxIjOn5Y"},
        {title: "My First card", status: "pending", isDone: false, today: "2018-02-21T13:00:13.979Z", _id: "UlSoOrLBjX2RldgQ"},
        {title: "Sun Pharma", status: "completed", isDone: true, today: "2018-02-20T16:41:19.040Z", _id: "VbBEyndCIhPDB1Uf"},
        {title: "Design News", status: "pending", isDone: false, today: "2018-02-21T13:00:07.730Z", _id: "rpW4bVIYWjlPMgk6"},
        {title: "Amul India sddsd", status: "pending", isDone: false, today: "2018-02-20T16:41:13.087Z", _id: "uyISWNb7vapmRrNG"}
        ];


console.log(groupBy(originalArray, 'today'));

Answer 3

我发现最简单的方法是使用名为lodash的库，更具体地说是_.groupBy函数：

＆＃13;

var originalArray = [
        {title: "New Three 123", status: "pending", isDone: false, today: "2018-02-20T16:40:17.759Z", _id: "Eyt44n1svxIjOn5Y"},
        {title: "My First card", status: "pending", isDone: false, today: "2018-02-21T13:00:13.979Z", _id: "UlSoOrLBjX2RldgQ"},
        {title: "Sun Pharma", status: "completed", isDone: true, today: "2018-02-20T16:41:19.040Z", _id: "VbBEyndCIhPDB1Uf"},
        {title: "Design News", status: "pending", isDone: false, today: "2018-02-21T13:00:07.730Z", _id: "rpW4bVIYWjlPMgk6"},
        {title: "Amul India sddsd", status: "pending", isDone: false, today: "2018-02-20T16:41:13.087Z", _id: "uyISWNb7vapmRrNG"}
        ]

var outputArray = _.groupBy(originalArray, function(item) {
    return item.today.substr(0, 10)
        .replace(/-/g, ',')
        .replace(/([$,])(0)(\d[,^])/, '$1$3')
    });

console.log(outputArray);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.js"></script>

＆＃13;

Answer 4

使用javascript减少功能的方法：

var arr = [{
    title: "New Three 123",
    status: "pending",
    isDone: false,
    today: "2018-02-20T16:40:17.759Z",
    _id: "Eyt44n1svxIjOn5Y"
  },
  {
    title: "My First card",
    status: "pending",
    isDone: false,
    today: "2018-02-21T13:00:13.979Z",
    _id: "UlSoOrLBjX2RldgQ"
  },
  {
    title: "Sun Pharma",
    status: "completed",
    isDone: true,
    today: "2018-02-20T16:41:19.040Z",
    _id: "VbBEyndCIhPDB1Uf"
  },
  {
    title: "Design News",
    status: "pending",
    isDone: false,
    today: "2018-02-21T13:00:07.730Z",
    _id: "rpW4bVIYWjlPMgk6"
  },
  {
    title: "Amul India sddsd",
    status: "pending",
    isDone: false,
    today: "2018-02-20T16:41:13.087Z",
    _id: "uyISWNb7vapmRrNG"
  }
];

function adjustDate(date) {
  const year = date.substring(0, 4);
  const month = date.substring(5, 7);
  const day = date.substring(8, 10);
  return year + ',' + month + ',' + day;
}

const output = arr.reduce((acc, x) => {
  const dateKey = adjustDate(x.today);

  if (!acc[dateKey]) {
    acc = {
      ...acc,
      [dateKey]: [x]
    }
    return acc;
  }

  return acc = {
    ...acc,
    [dateKey]: [...acc[dateKey], x]
  }
}, {})


console.log('Output', output);

JavaScript - 按日期

4 个答案: