How to loop array of objects as separate tables in angular8

Question

I am using Angular8, here I have got an array of objects as individual roles, which contains a list of users in it. Now I need to show those roles in separate tables. So I need to call the same code for 7 times as there are 7 roles with headings. Instead of calling the same code for 7 times, can it be looped along with the Role name as a heading, and if there is no data for that particular role, how can that be hidden?

HTML:

 <div class="mb-3" *ngIf="contactsList?.length !=0">
    <h6>Personal Lines Marketing</h6> 
    <table class="table table-hover accordion-table" id="accordionContact">
        <thead>
            <tr>
                <th scope="col" *ngFor="let field of contactListDetails" (click)="sortContactsList(field.param)">
                    {{field.displayName}}
                    <i class="{{field.icon}}" aria-hidden="true"></i>
                </th>
                <th scope="col" class="width125"></th>
            </tr>
        </thead>
        <tbody>
                <tr *ngFor="let contact of contactsList.plMarketing | paginate: config ;let i = index">
                    <td *ngFor="let field of contactListDetails" class="{{field.class}}" (click)="editContact(contact,contact.contactId)">
                        {{contact[field.param]}}
                    </td>
                    <td class="width125 {{paginationDisable?'link-disabled':''}}" ><button class="btn btn-outline-primary btn-table" title="Send Mail"
                            (click)="userDisplay(contact)"  [disabled]="isReadOnly && mode ==1"><i class="far fa-envelope"></i></button>
                        </td>
                </tr>
        </tbody>
    </table>
</div>

TS:

contactsList = [{
        "version": null,
        "statusCode": 200,
        "message": "Success",
        "isError": false,
        "result": {
            "plMarketing": [
                {
                    "userId": 2,
                    "agentCode": 3343,
                    "userName": "New,New",
                    "phoneNumber": "123",
                    "faxNumber": "123",
                    "email": "[email protected]"
                }          
            ],
            "clMarketing": [
                {
                    "userId": 2,
                    "agentCode": 3343,
                    "userName": "New,New",
                    "phoneNumber": "123",
                    "faxNumber": "123",
                    "email": "[email protected]"
                }
            ],
            "plUnderWrite": [
                {
                    "userId": 15,
                    "agentCode": 3343,
                    "userName": "ghghgh,hghgh",
                    "phoneNumber": null,
                    "faxNumber": null,
                    "email": "[email protected]"
                }
            ],
            "clUnderWrite": [
                {
                    "userId": 19,
                    "agentCode": 3343,
                    "userName": "hghg,fse",
                    "phoneNumber": null,
                    "faxNumber": null,
                    "email": "[email protected]"
                }
            ],
            "plCorrespond": [
                {
                    "userId": 18,
                    "agentCode": 3343,
                    "userName": "hghg,fse",
                    "phoneNumber": null,
                    "faxNumber": null,
                    "email": "[email protected]"
                }
            ],
            "clCorrespond": [
                {
                    "userId": 15,
                    "agentCode": 3343,
                    "userName": "ghghgh,hghgh",
                    "phoneNumber": null,
                    "faxNumber": null,
                    "email": "[email protected]"
                }
            ],
            "accounting": [
                {
                    "userId": 18,
                    "agentCode": 3343,
                    "userName": "hghg,fse",
                    "phoneNumber": null,
                    "faxNumber": null,
                    "email": "[email protected]"
                }
            ],
            "management": [
                {
                    "userId": 16,
                    "agentCode": 3343,
                    "userName": "hghg,fse",
                    "phoneNumber": null,
                    "faxNumber": null,
                    "email": "[email protected]"
                }
            ]
        }
    }]

So here, plMarketing, clmarketing, plunderwriting are all different roles, and all roles contain the same param names.

Please help me to loop without adding extra 7 times the same code.

DEMO: DEMO

You should make that block of HTML a component that has an input for the title and the array of data. — cjd82187
– cjd82187, Commented Jul 15, 2020 at 4:10
Thanks for response, i have created a demo, could you please help me out to make it work? — Bhrungarajni
– Bhrungarajni, Commented Jul 15, 2020 at 4:11

Santosh Shinde · Accepted Answer · 2020-07-15 05:01:45Z

1

component.html

 <div *ngIf="contactsList?.length !=0">
    <div class="mb-3" *ngFor="let key of keys;let i = index">
        <h6 style="font-weight: 600;">{{key | titlecase}}</h6>
        <table class="table table-hover accordion-table" id="accordionContact">
            <thead>
                <tr>
                    <th scope="col" *ngFor="let field of contactListDetails" (click)="sortContactsList(field.param)">
                        {{field.displayName}}
                        <i class="{{field.icon}}" aria-hidden="true"></i>
                    </th>
                    <th scope="col" class="width125"></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{{contactsDetails[0].result[key][0]?.userName}}</td>
                    <td>{{contactsDetails[0].result[key][0]?.faxNumber}}</td>
                    <td>{{contactsDetails[0].result[key][0]?.email}}</td>
                    <td>{{contactsDetails[0].result[key][0]?.phoneNumber}}</td>
                    <td class="width125 {{paginationDisable?'link-disabled':''}}"><button class="btn btn-outline-primary btn-table" title="Send Mail"
                            (click)="userDisplay(contactsDetails[0].result[key][0])"  [disabled]="isReadOnly && mode ==1">Email</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  contactsList:any =[]
   public contactListDetails = [
    { param: 'userName', displayName: 'User Name', icon: 'fas fa-sort ', class:"textInputUpperCase" },
    { param: 'faxNumber', displayName: 'Fax Number', icon: 'fas fa-sort ',class:"textInputUpperCase" },
    { param: 'email', displayName: 'Email',icon: 'fas fa-sort ',class:"textInputUpperCase"  },
    { param: 'phoneNumber', displayName: 'PhoneNumber' },
  ];

  keys = []; //declared array to get all keys from result key
  public contactsDetails = [{
        "version": null,
        "statusCode": 200,
        "message": "Success",
        "isError": false,
        "result": {
            "plMarketing": [
                {
                    "userId": 2,
                    "agentCode": 3343,
                    "userName": "New,New",
                    "phoneNumber": "123",
                    "faxNumber": "123",
                    "email": "[email protected]"
                }          
            ],
            "clMarketing": [
                {
                    "userId": 2,
                    "agentCode": 3343,
                    "userName": "New,New",
                    "phoneNumber": "123",
                    "faxNumber": "123",
                    "email": "[email protected]"
                }
            ],
            "plUnderWrite": [
                {
                    "userId": 15,
                    "agentCode": 3343,
                    "userName": "ghghgh,hghgh",
                    "phoneNumber": null,
                    "faxNumber": null,
                    "email": "[email protected]"
                }
            ],
            "clUnderWrite": [
                {
                    "userId": 19,
                    "agentCode": 3343,
                    "userName": "hghg,fse",
                    "phoneNumber": null,
                    "faxNumber": null,
                    "email": "[email protected]"
                }
            ],
            "plCorrespond": [
                {
                    "userId": 18,
                    "agentCode": 3343,
                    "userName": "hghg,fse",
                    "phoneNumber": null,
                    "faxNumber": null,
                    "email": "[email protected]"
                }
            ],
            "clCorrespond": [
                {
                    "userId": 15,
                    "agentCode": 3343,
                    "userName": "ghghgh,hghgh",
                    "phoneNumber": null,
                    "faxNumber": null,
                    "email": "[email protected]"
                }
            ],
            "accounting": [
                {
                    "userId": 18,
                    "agentCode": 3343,
                    "userName": "hghg,fse",
                    "phoneNumber": null,
                    "faxNumber": null,
                    "email": "[email protected]"
                }
            ],
            "management": [
                {
                    "userId": 16,
                    "agentCode": 3343,
                    "userName": "hghg,fse",
                    "phoneNumber": null,
                    "faxNumber": null,
                    "email": "[email protected]"
                }
            ]
        }
    }]
    ngOnInit(){
      this.contactsList = this.contactsDetails[0].result;
      this.keys = Object.keys(this.contactsDetails[0].result); // getting all keys of result object
    }
}

edited Jul 15, 2020 at 5:01

answered Jul 15, 2020 at 4:38

Santosh Shinde

1,21210 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Santosh Shinde Over a year ago

Here is working demo stackblitz.com/edit/santosh-angular-print-complex-array-object

Bhrungarajni Over a year ago

sorry hope i didnt clear the requirement, i will make my demo more clear so you will get to know my issue

Bhrungarajni Over a year ago

stackblitz.com/edit/… i have made my demo to work like this, here i am pasting same lines of code but with changing the heading name and the ngFor loop array name, so here instead of repeating code so many times in html, can we do in any way?

Bhrungarajni Over a year ago

basically i need output as shown in demo, but need to reduce html code, which is repeating is my concern

Santosh Shinde Over a year ago

I have edited demo and answer too stackblitz.com/edit/santosh-angular-print-complex-array-object

|

Collectives™ on Stack Overflow

How to loop array of objects as separate tables in angular8

1 Answer 1

12 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related