AngularJS - 将具有相同值的数组中的对象分组到一个新数组中答案

【问题标题】：AngularJS - Group objects in an array with a same value into a new arrayAngularJS - 将具有相同值的数组中的对象分组到一个新数组中
【发布时间】：2018-07-24 19:22:25
【问题描述】：

我有一个包含 startDate 的对象数组。对象不是按 startDate 顺序排列的。我想创建一个新数组并将所有共享相同 startDate 的对象分组到单独的对象中。

var eventArray = [
  {
    eventName: "event1",
    startDate: "2018/08/01", // YYYY/MM/DD
    id: 1
  },
  {
    eventName: "event2",
    startDate: "2018/08/03",
    id: 2
  },
  {
    eventName: "event3",
    startDate: "2018/08/01",
    id: 3
  },
  {
    eventName: "event4",
    startDate: "2018/08/06",
    id: 4
  }
];

使用 angular.forEach 我尝试遍历所有对象，获取 startDate 值，将该值添加到新数组中，并将当前对象添加到具有匹配日期的数组中。我找不到将当前事件对象添加到新数组 (eventDays) 中与我的 eventIndex 变量匹配的索引处的对象的解决方案。

let eventDays = [];
let eventIndex = 0;

angular.forEach(eventArray, function(event){
  let day = event.startDate;

  if(eventDays.length == 0){
    eventDays.push({
      dateGroup: day,
      event
    });
  }
  else {
    if(event.startDate == eventDays[eventIndex].groupDay) {
      // insert event object into eventDays[eventIndex] after dateGroup, event
    }
    else if(event.startDate !== eventDays[eventIndex].groupDay){
      eventDays.push({
        dateGroup: day,
        event
      });

      eventIndex++;
    }
  }

});

我正在寻找的结果是这样的。

eventDays  = [
  {
    groupDate: "2018/08/01",
    event: {
      eventName: "event1",
      startDate: "2018/08/01",
      id: 1
    },
    event: {
      eventName: "event3",
      startDate: "2018/08/01",
      id: 3
    }
  },
  {
    groupDate: "2018/08/03",
    event: {
      eventName: "event2",
      startDate: "2018/08/03",
      id: 2
    }
  },
  {
    groupDate: "2018/08/06",
    event: {
      eventName: "event4",
      startDate: "2018/08/06",
      id: 4
    }
  }
];

这样的事情可能吗？

更新

Nina 是对的，我不能重复使用名称 keyname。我需要在对象中创建另一个数组来存储我传递的对象。这个 sn-p 正在工作。

angular.forEach($scope.events, function (event) {

            if ($scope.eventDays.length == 0) {
                $scope.eventDays.push({
                    'groupDate': event.startDate,
                    'events': [event]
                });
            } else {
                if (event.startDate == $scope.eventDays[eventIndex].groupDate) {
                    $scope.eventDays[eventIndex].events.push(event)
                } else if (event.startDate !== $scope.eventDays[eventIndex].groupDate) {
                    $scope.eventDays.push({
                        'groupDate': event.startDate,
                        'events': [event]
                    });

                    eventIndex++;
                }
            }

        });

【问题讨论】：

不，您不能使用相同的键名两次。你可以用一个数组来收集对象。
Nina 是正确的，应该是 groupDate: '2018/08/03', events: [{eventName: "event1", startDate: "2018/08/01", id: 1 },{eventName: "event3",startDate: "2018/08/01",id: 3}] 那么你可以稍微改变一下获取它们的方式。它将循环遍历数组中的事件，而不是拥有顶级对象。这也是格式化 JSON 数据的更好方法。
frostbyte，仅供参考，@NinaScholz 指的是键名 event。您必须考虑任何其他输出替代方案。当你这样做时，更新问题。
尼娜完全正确。我很惭愧我错过了那个。我已经更新了我的帖子。我将当前的event 添加到events 数组中。这是有效的！
如果您有问题的答案，请不要将其添加到问题中。把它放在答案部分。见Can I answer my own question?,

标签： javascript arrays angularjs

【解决方案1】：

您可以使用Map 对相同的startDate 进行分组，并使用对象进行比数组渲染。

var eventArray = [{ eventName: "event1", startDate: "2018/08/01", id: 1 }, { eventName: "event2", startDate: "2018/08/03", id: 2 }, { eventName: "event3", startDate: "2018/08/01", id: 3 }, { eventName: "event4", startDate: "2018/08/06", id: 4 }],
    result = Array.from(
        eventArray.reduce((m, o) => m.set(o.startDate, (m.get(o.startDate) || []).concat(o)), new Map),
        ([groupDate, events]) => ({ groupDate, events })
    );

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

【讨论】：

我不熟悉在 JS 中使用 Map。你的解决方案比我的要干净得多。我将尝试使用您的解决方案，看看是否可以使其正常工作。谢谢！

【解决方案2】：

Nina 是对的，我不能重复使用名称 keyname。我需要在对象中创建另一个数组来存储我传递的对象。这个 sn-p 正在工作。

angular.forEach($scope.events, function (event) {

        if ($scope.eventDays.length == 0) {
            $scope.eventDays.push({
                'groupDate': event.startDate,
                'events': [event]
            });
        } else {
            if (event.startDate == $scope.eventDays[eventIndex].groupDate) {
                $scope.eventDays[eventIndex].events.push(event)
            } else if (event.startDate !== $scope.eventDays[eventIndex].groupDate) {
                $scope.eventDays.push({
                    'groupDate': event.startDate,
                    'events': [event]
                });

                eventIndex++;
            }
        }

    });

【讨论】：