Drop down 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. 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: [] = []

canpan14 · Answer 1 · 2018-07-25T14:22:13.307

0

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

edited Jul 25 '18 at 14:22

answered Jul 24 '18 at 14:27

canpan14

1,181
1
14
36

I don't see how this fixes the problem of the DatePipe or how to incorporate the yearChange function. The Datepipe has an error of trying to use formatDate function which doesn't seem to exist on the Datepipe. – L.C Jul 24 '18 at 15:35
My mistake, I misread the question and though you were looking for a way to filter out the data post-load. Let me edit it again and change things up. – canpan14 Jul 24 '18 at 16:02
@L.C edited my code, i'd personally bring in moment js as it would handle the formatting for me. – canpan14 Jul 24 '18 at 16:16
Two problems encourted with this. Split has an error of does not exist on type Date. Also the code doesn't like the first line. It says this.years is not assignable to Sunscription as subscription can't be assigned to any. – L.C Jul 25 '18 at 09:29
@L.C New version works for me, ripped out all the other stuff. I used this to test things out https://jsfiddle.net/npo4j6xm/8/ – canpan14 Jul 25 '18 at 14:23

Drop down populated from json data

1 Answers1