Underscore.js로 계산 된 녹아웃 생성 그룹 select 컨트롤에 대한 참조 및 매핑

Question

그룹화 된 옵션으로 선택 컨트롤을 표시 할 부분 뷰를 만들려고합니다.

[{ 
    "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" 
}] 

나의 현재 타이프 :

내 의도는 계산 된 넉 아웃에서 다음 JSON으로 끝낼 것입니다

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

내가 먼저 plunker에서이를 확인하고 싶습니다하지만

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

합니다.