Dropdown populated from json data

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.

This is the Html code for the drop down:

<div class="row justify-content-center">
        <div class="col-4s">
        <p>Financial Year:</p>
        </div>
        <div class="col-4s">
            <select>
                <option *ngFor="let volumes of volumes">{{ volumes.month | 
                 date: 'yyyy' }}</option>
            </select>
        </div>
    </div>

Angular4 code: export class VehicleVolumeEditComponent implements OnInit {

volumes: Volumes[];
groupedVolumes : any;

constructor(private volumeService: VolumeService, private router: Router) { 
    this.volumeService.getVolumes().subscribe(volumes => {
        this.volumes = volumes;
        this.groupedVolumes = this.group(this.volumes);
        this.dataOk = true;
    }
}

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"
}
{
    "id": 10,
    "month": "2017-12-01"
}
{
    "id": 11,
    "month": "2018-01-01"
}
{
    "id": 12,
    "month": "2018-02-01"
}
{
    "id": 13,
    "month": "2018-03-01"
}
]

Answer 1

I would filter out the unique values in the array doing something like this -

this.unique_volumes = this.volumes.slice().map(value => value.month = new Date(value.month).getFullYear()).filter((years, index, array) => array.indexOf(years) === index);

And then in HTML, I would loop over the unique_volumes instead of volumes .

<option *ngFor="let volumes of unique_volumes">{{ volumes }}</option>

Answer 2

try this

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

}

use this in 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>