javascript - 创建使用Underscore.js groupBy计算的 knockout 并映射选择控件

我试图创建一个局部视图，以显示带有分组选项的选择控件。

我最初有JSON：

[{
    "customFrequencyId": 1008,
    "startDate": "2016-10-29T00:00:00Z",
    "endDate": "2016-11-25T00:00:00Z",
    "label": "P11 2016"
}, {
    "customFrequencyId": 1008,
    "startDate": "2016-11-26T00:00:00Z",
    "endDate": "2016-12-31T00:00:00Z",
    "label": "P12 2016"
}, {
    "customFrequencyId": 1008,
    "startDate": "2017-01-01T00:00:00Z",
    "endDate": "2017-01-28T00:00:00Z",
    "label": "P1 2017"
}, {
    "customFrequencyId": 1008,
    "startDate": "2017-01-29T00:00:00Z",
    "endDate": "2017-02-25T00:00:00Z",
    "label": "P2 2017"
}, {
    "customFrequencyId": 1008,
    "startDate": "2017-02-26T00:00:00Z",
    "endDate": "2017-03-23T00:00:00Z",
    "label": "P3 2017"
}]

我当前的TypeScript：

export class CustomPeriodSelection {

    customPeriods: KnockoutObservable<any[]> = ko.observable([]);
    selectedOption: KnockoutObservable<any> = ko.observable();

    customGroups: KnockoutComputed<any[]> = ko.computed(() => {
        var groupedList = _.groupBy(this.customPeriods(), function (item: any) {
            return item.endDate.substring(0, 4);
        });

        return _.map(groupedList, function (item: any) {
            return item;
        });
    });

    constructor(
        customPeriods: any[]
    ) {
        this.customPeriods(customPeriods);
    }
}

我的目的是从计算出的Knockout中获得以下JSON ...

[{
    "label": 2016,
    "customPeriods": [{
        "customFrequencyId": 1008,
        "startDate": "2016-10-29T00:00:00Z",
        "endDate": "2016-11-25T00:00:00Z",
        "label": "P11 2016"
    }, {
        "customFrequencyId": 1008,
        "startDate": "2016-11-26T00:00:00Z",
        "endDate": "2016-12-31T00:00:00Z",
        "label": "P12 2016"
    }]
}, {
    "label": 2017,
    "customPeriods": [{
        "customFrequencyId": 1008,
        "startDate": "2017-01-01T00:00:00Z",
        "endDate": "2017-01-28T00:00:00Z",
        "label": "P1 2017"
    }, {
        "customFrequencyId": 1008,
        "startDate": "2017-01-29T00:00:00Z",
        "endDate": "2017-02-25T00:00:00Z",
        "label": "P2 2017"
    }, {
        "customFrequencyId": 1008,
        "startDate": "2017-02-26T00:00:00Z",
        "endDate": "2017-03-23T00:00:00Z",
        "label": "P3 2017"
    }]
}]

然后将其放置到这样的选择控件中。

<select class="form-control" data-bind="foreach: customGroups, event: { change: periodChanged }">
    <optgroup data-bind="attr: { label: $data.label}, foreach: customPeriods">
        <option data-bind="text: $data.label, value: $data"></option>
    </optgroup>
</select>

我假设这是不正确的groupBy＆map的实现。如何按年份对customPeriods数组进行分组，然后将结果映射到具有上述所需结构的新数组？

我目前从我编写的代码中获得以下内容。

[
  [
    {
      "customFrequencyId": 1008,
      "startDate": "2016-10-29T00:00:00Z",
      "endDate": "2016-11-25T00:00:00Z",
      "label": "P11 2016"
    },
    {
      "customFrequencyId": 1008,
      "startDate": "2016-11-26T00:00:00Z",
      "endDate": "2016-12-31T00:00:00Z",
      "label": "P12 2016"
    }
  ],
  [
    {
      "customFrequencyId": 1008,
      "startDate": "2017-01-01T00:00:00Z",
      "endDate": "2017-01-28T00:00:00Z",
      "label": "P1 2017"
    },
    {
      "customFrequencyId": 1008,
      "startDate": "2017-01-29T00:00:00Z",
      "endDate": "2017-02-25T00:00:00Z",
      "label": "P2 2017"
    },
    {
      "customFrequencyId": 1008,
      "startDate": "2017-02-26T00:00:00Z",
      "endDate": "2017-03-23T00:00:00Z",
      "label": "P3 2017"
    }
  ]
]

我读过其他问题，但我很挣扎。任何帮助将不胜感激（如果可能的话，给我一个解释，而不是仅仅为我做这件事）。谢谢！

最佳答案

你近了

更改：

return _.map(groupedList, function (item: any) {
            return item;
        });

至

return _.map(groupedList, function (item: any) {
            return { label: item[0].endDate.substring(0, 4), customPeriods: item };
        });

尽管我想先在一个插销中对此进行验证。