Drop down populated from json data - json

Question

I want my drop down to display 2017 and 2018 from my data. 2017 and 2018 repeats a lot throughout my json data file. But I want all the 2017 data to appear when selected and all the 2018 data to be displayed when selected. Currently it shows all data and the drop down is over populated.
I was told to try this but haven't managed to get it to work:
import {DatePipe} from '#angular/common';
.
.
volumes: Volumes[];
years: [] = [];
groupedVolumes : any;
constructor(private volumeService: VolumeService, private router: Router, private datePipe: DatePipe) {
}
ngOnInit(){
this.volumeService.getVolumes().subscribe(volumes => {
this.volumes = volumes;
for(let volume of volumes){
if(this.years.indexOf(datePipe.formatDate(volume.month, 'yyyy')) === -1)
this.years.push(datePipe.formatDate(volume.month, 'yyyy'));
}
this.groupedVolumes = this.group(this.volumes);
this.dataOk = true;
}
}
Html:
<div class="row justify-content-center">
<div class="col-4s">
<p>Financial Year:</p>
</div>
<div class="col-4s">
<select>
<option *ngFor="let year of years">{{ year }}</option>
</select>
</div>
</div>
Json File:
json file:
[
{
"id": 1,
"month": "2017-03-01"
}
{
"id": 2,
"month": "2017-04-01"
}
{
"id": 3,
"month": "2017-05-01"
}
{
"id": 4,
"month": "2017-06-01"
}
{
"id": 5,
"month": "2017-07-01"
}
{
"id": 6,
"month": "2017-08-01"
}
{
"id": 7,
"month": "2017-09-01"
}
{
"id": 8,
"month": "2017-10-01"
}
{
"id": 9,
"month": "2017-11-01"
}]
The problem with this is the DatePipe. It only has a transform function rather than formatDate.
Also it doesn't like years: [] = []

Answer 1

ngOnInit() {
this.years = this.volumeService.getVolumes().subscribe(volumes => {
this.volumes = volumes;
this.volumes.forEach(volume => {
if(!this.years || !(this.years.some(year => year.includes(volume.month.split('-')[0])))) {
this.years.push(volume.month.split('-')[0])
}
});
this.groupedVolumes = this.group(this.volumes);
this.dataOk = true;
}