Angular keyvalue -> How to iterate again when key is array?-CodePudding

How to iterate again through my object key when it is an array?

Here my HTML:

  <tbody>
  <tr *ngFor="let duplicate of duplicates | keyvalue; let i = index ">
    <th scope="row"> {{duplicate.key}} </th>
    <th scope="row"> {{duplicate.value}} </th>
  </tr>
  </tbody>

Here are my example objects. I have multiple ID's because it is showing me duplicates with same data but different ID's I need to display them in form of table one near another that's why I need to iterate through ID's key array

{
        "_id": [
            "62582bee93a35f434618668d",
            "62582baf93a35f434618663f",
            "62582be393a35f4346186681"
        ],
        "title": "Jr",
        "salutation": "Dr",
        "firstName": "Gerianna",
        "lastName": "Favela",
        "companyName": "Brainbox",
        "business": false,
        "street": "51 Elgar Terrace",
        "city": "Eger",
        "postcode": "3304",
        "email": "[email protected]",
        "phone": "957-614-0302"
},
{
        "_id": [
            "62582baf93a35f434618663d",
            "62582be393a35f434618667f"
        ],
        "title": "IV",
        "salutation": "Mrs",
        "firstName": "Marrilee",
        "lastName": "Glede",
        "companyName": "Rhyloo",
        "business": true,
        "street": "52668 Knutson Drive",
        "city": "Río Ceballos",
        "postcode": "5113",
        "email": "[email protected]",
        "phone": "658-769-1436"
},

CodePudding user response：

Try nested *ngIf if you want to iterate through ID's key array.

*ngFor="let duplicate of duplicates"
   *ngFor="let companyId of duplicate"

One thing to remember is performance issues if you have large data set. In that case, you should move the process to your ts file.

CodePudding user response：

Yes, I've used outer loop this is how I made it, and I have displayed every duplicate separately for each ID.

<ng-container *ngFor="let duplex of duplicates._id | keyvalue; let i = index ">
    <h4>{{duplex.value}}</h4>
  <tr *ngFor="let duplicate of duplicates | keyvalue; let i = index ">
    <ng-container *ngIf="duplicate.key !== '_id'">
    <th scope="row"> {{duplicate.key}}</th>
    <th scope="row"> {{duplicate.value}} </th>
    </ng-container>
</ng-container>