How to show data as date wise in Angular5 or Javascript?

Question

I am trying to show the data as date wise in my angular 5 application. I have uniq dates list array and data array. I want data like below

19/01/2018

Hyderabad, Chennai

20/01/2018

Chennai, Delhi

21/01/2018

Hyderabad, Mumbai

Arrays I have like this

dates_list = [19/01/2018, 20/01/2018, 21/01/2018];
data_list = [{
name: "Hyderabad"
date: "19/01/2018",
}, 
{
name: "Chennai"
date: "19/01/2018",
}, 
{
name: "Chennai"
date: "20/01/2018",
},
{
name: "Delhi"
date: "20/01/2018",
},
{
name: "Mumbai"
date: "21/01/2018",
},
{
name: "Hyderabad"
date: "19/01/2018",
}
]

Please suggest me how to do this. Thanks

one thing you can do is convert date into timestamp then you can compare them easily, but there may be some better approach — Abhay Sehgal, Aug 16 '18 at 07:54
You want to make a groupby, see, e.g. https://stackoverflow.com/questions/40774697/how-to-group-an-array-of-objects-by-key — Eliseo, Aug 16 '18 at 07:55

score 1 · Accepted Answer · answered Aug 16 '18 at 08:23

DEMO

TS:

filterdArray: Array<any> = [];

  dates_list = ['19/01/2018', '20/01/2018', '21/01/2018'];
  data_list = [{
    name: "Hyderabad",
    date: "19/01/2018",
  },
  {
    name: "Chennai",
    date: "19/01/2018",
  },
  {
    name: "Chennai",
    date: "20/01/2018",
  },
  {
    name: "Delhi",
    date: "20/01/2018",
  },
  {
    name: "Mumbai",
    date: "21/01/2018",
  },
  {
    name: "Hyderabad",
    date: "19/01/2018",
  }
  ];

  constructor() {
    this.getValiDates();
  }


  getValiDates() {
    this.dates_list.forEach(el => {
      this.filterdArray.push({ key: el, data: this.data_list.filter(data => data.date == el) });
    })
  }

HTML:

<div *ngFor="let d of filterdArray; let i = index">
    {{d.key}}
    <div *ngFor="let data of d.data">
        {{data | json}}
    </div>
</div>

please vote up if it helped so others can find it easily. – Akj Aug 16 '18 at 09:22 — Akj, Aug 16 '18 at 09:22

How to show data as date wise in Angular5 or Javascript?

1 Answers1