Angular : Grouper par nom de propriété et n'en afficher qu'une seule en cas de doublon

Question

Avoir un tableau comme celui-ci (par exemple, les produits dans un panier)

[{
    "name": "item 1",
    "id": 1,
    "price": 10
},
{
    "name": "item 2",
    "id": 2,
    "price": 20
},
{
    "name": "item 1",
    "id": 1,
    "price": 10
},
{
    "name": "item 3",
    "id": 3,
    "price": 30
}]

Comment puis-je faire un *ngFor dans Angular 8 afin d'imprimer une sortie comme :

• 2x poste 1, sous-total 20
• 1x article 2, sous-total 20
• 1x article 3, sous-total 30

En gros, je souhaite regrouper par nom (ou ID) les éléments en double et n'afficher qu'une seule ligne pour eux. Je dois également compter les occurrences et le sous-total de celles-ci.

Answer 1

Vous pouvez prétraiter le tableau avant de l'utiliser. Par exemple : La méthode la plus efficace pour faire un groupage sur un tableau d'objets.

Et encore mieux - pour effectuer le prétraitement dans pipe et l'utiliser comme :

<div *ngFor="entry in items | customGroupByPype">

Answer 2

Essayez comme ça :

Tapuscrit :

export class AppComponent {
  originaldata = [{
    "name": "item 1",
    "id": 1,
    "price": 10
  },
  {
    "name": "item 2",
    "id": 2,
    "price": 20
  },
  {
    "name": "item 1",
    "id": 1,
    "price": 10
  },
  {
    "name": "item 3",
    "id": 3,
    "price": 30
  }]
  viewData = []

  constructor() {
    var groupedByData = this.groupByKey(this.originaldata, 'name')

    (Object.keys(groupedByData)).forEach(x => {
      this.viewData.push(
        {
          name:x,
          quantity : groupedByData[x].length + 'x',
          subtotal :  (groupedByData[x].map(x=> x.price)).reduce(function(a, b) { return a + b; }, 0)
        }
      )
    })
    console.log(this.viewData)
  }

  groupByKey(data, key) {
    return data.reduce(function (rv, x) {
      (rv[x[key]] = rv[x[key]] || []).push(x);
      return rv;
    }, {});
  };
}

Modèle

<table>
    <tr *ngFor="let item of viewData">
    <td>{{item.quantity}}</td>
    <td>{{item.name}}, </td>
    <td>subtotal  {{item.subtotal}}</td>
    </tr>
</table>

Véase Démonstration Stackbiltz