CODEWITHSUNDEEP
angularangular-materialmat-table
baronming
baronming

Reputation: 258

angular material table loop through item array

I try to print in Mat-table my Data.

I'm very close but I'm not able to complete my front end.

My data are :

0: {Group: 1, Rules: Array(1), Title: "NAME"}
1: {Group: 2, Rules: Array(2), Title: "TERRITORY"}

And the array for Group 1 have rules like this (and so on for Group 2):
0: {Date: "1990-01-01", NewRules: 0, Rules: "Ligue Name", Id: 1}
1: {Date: "1990-01-01", NewRules: 1, Rules: "Other rules", Id: 2}

here's the .html code:

<mat-card-content>
  <table mat-table [dataSource]="rules$ | async" class="mat-elevation-z8">

    <!-- DateModifier Column -->
    <ng-container matColumnDef="Date">
      <th mat-header-cell *matHeaderCellDef>Date</th>
      <td mat-cell *matCellDef="let element">
        {{ element.Reules[0].Date }}
      </td>
    </ng-container>

    <!-- Reglement Column -->
    <ng-container matColumnDef="Rules">
      <th mat-header-cell *matHeaderCellDef>Rule</th>
      <td mat-cell *matCellDef="let element">
        {{ element.Rules[0].Rules }}
      </td>
    </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
 </table>
</mat-card-content>

What I've got it's ok If I specify : element.Rules[0].Rules

But I want to loop through each item of the array.

Giving something

Date       Rules

1990/1/1  Ligue Name

1990/1/1  Other Rules

Also if you can give me this hint too. How Can I print for each Group the title before all the rules ?

Group : NAME

Date       Rules

1990/1/1  Ligue Name

1990/1/1  Other Rules

Group: TERRITORY
 etc....

file .ts:

import { Component, OnInit, Input } from "@angular/core";
import { Reglements } from "../models/models";
import { MatDialog } from "@angular/material";
import { FirebaseService } from "../service/firebase.service";
import { Observable } from "rxjs";

@Component({
  selector: "app-reglements",
  templateUrl: "./reglements.component.html",
  styleUrls: ["./reglements.component.css"]
})
export class ReglementsComponent implements OnInit {
  displayedColumns: string[] = ["Date", "Rules"];

  @Input()
  // public boardDirection: AngularFireList<Direction[]>;
  public reglements$: Observable<Reglements[]>;

  constructor(
    private dialog: MatDialog,
    private firebaseService: FirebaseService
  ) {
    this.reglements$ = firebaseService.loadAllRules();
    this.reglements$.forEach(element => {
      console.log("eleem", element);
    });
  }

  ngOnInit() {}
}

Thanks

Upvotes: 1

Views: 18853

Answers (2)

Zulqarnain Jalil
Zulqarnain Jalil

Reputation: 1691

If you want to loop through each Rule in given data you can use nested table. I have created some code for nested table using angular material click here

Upvotes: 3

Eranki
Eranki

Reputation: 807

What I understood in your question is that you have a dictionary of group, rules and title. Among them, rules is a array of dictionaries and you want to loop through that dictionary and print it in table. So, this is how your datasource looks like:

dataSource = [
               {group: 1, rules: [{'date': '2019-1-31', 'rules': 'Some Rule', id: 1}, {'date': '2019-1-27', 'rules': 'Some Rule', id: 2}], title: 'name'},
               {group: 2, rules: [{'date': '2019-1-31', 'rules': 'Some Rule', id: 1}, {'date': '2019-1-27', 'rules': 'Some Rule', id: 2}], title: 'TERRITORY'}
             ]

After modifying your code:

 <table mat-table [dataSource]="dataSource">
     <ng-container matColumnDef="yourColName">
       <th mat-header-cell *matHeaderCellDef>Group</th>
       <td mat-cell *matCellDef="let element">
           {{element.group}}
       </td>
     </ng-container>
     <ng-container matColumnDef="yourColName">
       <th mat-header-cell *matHeaderCellDef>Rules Array Object</th>
       <td mat-cell *matCellDef="let element">
          <!--THIS IS WHERE YOU ARE ITERATING THROUGH ARRAY OF RULES OBJECT-->
           <ng-container *ngFor="let rule of element.rules">
               {{ rule.date}}, {{rule.rules}}, {{rule.id}}
           </ng-container>
       </td>
     </ng-container>
 </table>

Upvotes: 6

Related Questions