In my Angular 4 application, I have an array of tasks that are displayed in a table. The JSON data structure for these tasks is as follows:
[
{
"id": "353610d2-4a6d-4dc3-9468-b88732d98397",
"dueDate": "20/12/2017",
"claimNumber": "19875677",
"actionType": "Admission",
"actionName": "Call TP Insurer",
"owner": "Ben Clarke",
"tags": [
{
"id": "78ef9592-7ed6-4192-aecc-4be8bb561f67",
"description": "Third Party 2",
"colour": "#df9626"
}
]
}
]
The tasks are then displayed in a table structured like this:
<table>
<thead>
<tr>
<th>Date Due</th>
<th>
<span (click)="onDisplayContext($event, 'ClaimNumber')">Claim Number</span>
</th>
<th>
<span (click)="onDisplayContext($event, 'ActionType')">Action Type</span>
</th>
<th>
<span (click)="onDisplayContext($event, 'ActionName')">Action Name</span>
</th>
<th>
<span (click)="onDisplayContext($event, 'Owner')">Owner</span>
</th>
<th>
<span (click)="onDisplayContext($event, 'Tags')">Tags</span>
</th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let task of Tasks; let i = index">
<td>{{task.dueDate}}</td>
<td>{{task.claimNumber}}</td>
<td>{{task.actionType}}</td>
<td>{{task.actionName}}</td>
<td>{{task.owner}}</td>
<td>
<div fxLayout="row">
<div *ngFor="let tag of task.tags; let r = index">
<span class="tag" [style.background-color]="tag.colour">{{tag.description}}</span>
</div>
</div>
</td>
<td>
<div class="chk_round">
<input type="checkbox" id="chk_{{task.id}}" />
<label for="chk_{{task.id}}"></label>
</div>
</td>
</tr>
</tbody>
</table>
Each <th> element in the table header is clickable to open a popup that shows all distinct values from the corresponding column.
If a user clicks on a specific column header, how can I create another array from the original tasks array containing only the values of that particular column?