Search code examples
htmlarraysangularhtml-tablengfor

How do I group HTML table with the same value from array (Javascript)

I have an array with appointment data like this which I want to make tables from:

[
 { 
  day: '20/10/2020',
  subject: 'meeting',
  client: 'Rob'
  location: 'Office
 },
{ 
  day: '21/10/2020',
  subject: 'meeting',
  client: 'Lisa'
  location: 'Town'
 },
{ 
  day: '21/10/2020',
  subject: 'meeting',
  client: 'Kevin'
  location: 'Office
 },
 { 
  day: '22/10/2020',
  subject: 'meeting',
  client: 'Kevin'
  location: 'Home'
 }
]

my html file:

 <div *ngFor="let appointment of appointments"   class="card-body">
   <table class="table table-striped">
     <thead>
  <tr>
  <th>  Day </th>
  <th>Where </th>
  <th> Client</th>
  <th>Subject</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
  <td>  <small>{{appointment.day}}</small></td>
  <td> <small>{{appointment.location}} </small> </td>
  <td><small>{{appointment.client}}</small> </td>
    <td><small>{{appointment.subject}} </small></td>
  </tfoot>
</table>
</div>

This produces a table per appointment, but how can I make it such that the appointments on the same day appear below eachother, without theader inbetween. So like this: (visualisation)

enter image description here

any help is appreciated

Solution

  • There is a very simple way to solve your issue, let's do it. We will make use of the lodash library, so first of all you will need to import.

    Installing via NPM:

    npm i lodash
npm i --save-dev @types/lodash

    And importing to our project:

    import * as _ from 'lodash';

    So then the magic happens, with our just imported friend and its groupBy() method:

    let result = _.groupBy(this.appointments, (appointment) => {
return appointments.day;
});
console.log(result);

    The result from the console will be:

    {
  "20/10/2020": [
    {
      "day": "20/10/2020",
      "subject": "meeting",
      "client": "Rob",
      "location": "Office"
    }
  ],
  "21/10/2020": [
    {
      "day": "21/10/2020",
      "subject": "meeting",
      "client": "Lisa",
      "location": "Town"
    },
    {
      "day": "21/10/2020",
      "subject": "meeting",
      "client": "Kevin",
      "location": "Office"
    }
  ],
  "22/10/2020": [
    {
      "day": "22/10/2020",
      "subject": "meeting",
      "client": "Kevin",
      "location": "Home"
    }
  ]
}