Создать нокаут, вычисленный с помощью группы Underscore.jsBy & map для выбранного элемента управления

Question

Я пытаюсь создать частичное представление, которое отобразит элемент управления select с сгруппированными параметрами.

У меня есть начальный бит 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" 
}] 

Мой текущий Машинопись:

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); 
    } 
} 

Мое намерение состоит в том, чтобы в конечном итоге с помощью следующей 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 &. Как я могу группировать массив 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" 
    } 
    ] 
] 

Я прочитал другие вопросы, но я борюсь. Любая помощь была бы с благодарностью (с объяснением, если это возможно, а не просто для этого). Благодаря!

Answer 1

Вы близко.

Изменение:

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

в

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

Хотя я хотел бы проверить это в plunker первый.