как я могу сгруппировать по 3 атрибутам?

Question

Допустим, у меня есть такой массив:

[

{
    "col1" : "A1",
    "col2" : "B1",
    "col3" : "C1",
    "col4" : "D1",
},
 {
    "col1" : "A1",
    "col2" : "B1",
    "col3" : "C1",
    "col4" : "D2",
},
 {
    "col1" : "A1",
    "col2" : "B1",
    "col3" : "C1",
    "col4" : "D3",
},
 {
    "col1" : "A1",
    "col2" : "B1",
    "col3" : "C2",
    "col4" : "D4",
}

]

Я хочу сгруппировать по первым трем атрибутам, а затем показать его в файл HTML, как на картинке по ссылке.

Есть ли функция JavaScript для группировки? И как я могу показать это в виде таблицы HTML?

https://imgur.com/a/n2CKOmD

Я использую angular cli версии 9.0.6

Answer 1

Вот мое решение: - Рабочий Stackblitz: - https://stackblitz.com/edit/angular-eau2qn

HTML: -

<table>
    <thead>
        <tr>
            <th *ngFor="let colHead of allKeys">{{colHead | titlecase}}</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="oneCol" *ngFor="let data of uniqueKeysCol | keyvalue">
                <table *ngIf="data.value.length">
          <ng-container *ngFor="let item of data.value">
                    <tr *ngIf="result[item] > 0">
                        {{item}}
                    <tr>
            </ng-container>
                </table>
            <td>
        <tr>
    </tbody>
</table>

CSS: -

table {
  border: 1px solid black;
  border-collapse: collapse;
  width: 100%;
  height: 100%;
}
.oneCol tr {
  border: 1px solid black;
}
td {
  border: 1px solid black;
  text-align: center;
}
.oneCol tr {
  height: 100%;
} 

Машинопись

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  public uniqueKeysCol = {};
  public allKeys = [];
  public result = {};
  public data = [
    {
      col1: "A1",
      col2: "B1",
      col3: "C1",
      col4: "D1"
    },
    {
      col1: "A1",
      col2: "B1",
      col3: "C1",
      col4: "D2"
    },
    {
      col1: "A1",
      col2: "B1",
      col3: "C1",
      col4: "D3"
    },
    {
      col1: "A1",
      col2: "B1",
      col3: "C2",
      col4: "D4"
    }
  ];
  ngOnInit(){
    this.filterData(this.data);
  }
  public filterData(data) {
    this.allKeys = Object.keys(data[0]);
    var resultData = [];
    this.allKeys.forEach((key, index) => {
     this.uniqueKeysCol[key] = [];
     data.forEach((dataObj) => {
       if(this.uniqueKeysCol[key].indexOf(dataObj[key]) === -1) {
         this.uniqueKeysCol[key].push(dataObj[key]);
         this.result[dataObj[key]] = 0;
       }
       this.result[dataObj[key]]++;
     })
    });

    console.log('uniqueKeysCol')
    console.log(this.uniqueKeysCol);
    console.log('result');
    console.log(this.result);
    console.log('allkeys');
    console.log(this.allKeys)
  }
}