How to get values in array of array in angular?

Question

I am getting the table column name as a status and I need to change the color of the buttons based on status value.

<ng-container matColumnDef="agentName">
    <th mat-header-cell *matHeaderCellDef>Agent Name</th>
    <td mat-cell *matCellDef="let element">{{element.agent_id.company_name}}</td>
</ng-container>

<ng-container matColumnDef="status">
    <th mat-header-cell *matHeaderCellDef>Status</th>
    <td mat-cell *matCellDef="let element"><span class="dot" [ngStyle]="{'background-color': getRowColor()}"></span></td>
</ng-container>

component.ts

// ...

export class Component {
    red = { 'background-color': 'red' }
    yellow = { 'background-color': '#DAA520' }
    green = { 'background-color': '#00FF00' }
    pageSizeOptions: number[];
    displayedColumns: string[] = ['title', 'agentName', 'status', 'star'];
    dat: any[] = [{
        id: 1,
        title: 'Test',
    }];
    state : any = [];
    getPos: any = [];

    dataSource: MatTableDataSource<{}>;
    @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;

    constructor(
        private store: Store<IAppState>,
        private userService: UserService,
        private poService: PoService,
        private propertiesService: PropertiesService,
        private _location: Location,
    ) {}

    ngOnInit() {
        this.getAllPO()
        this.pageSizeOptions = this.propertiesService.getPaginationSize()
    }

    edit(data) {
        this.poService.changeEditPurchaseOrder(data)
    }

    getAllPO() {
        const payload = {
            'company_id': this.userService.getUserdetails().CompanyUser.company_id.id,
        }

        this.showSpinner = true
        this.poSuccessSubscription.unsubscribe()
        this.poErrorSubscription.unsubscribe()
        this.store.dispatch(new GetAllPOs(payload))

        this.poSuccessSubscription = this.store
            .pipe(select(getAllPOsSuccess))
            .subscribe((result: any) => {
                if (!!result) {
                    this.getPos = result
                    this.state = this.getPos.find(element => {
                        return element.POMaterials.find(item =>{
                            return item.state
                        })
                    })
                    this.dataSource = new MatTableDataSource(result)
                    this.dataSource.paginator = this.paginator;
                    this.showSpinner = false
                } else {
                    this.dataSource = new MatTableDataSource([])
                    this.dataSource.paginator = this.paginator;
                    this.showSpinner = false
                }
            })

        this.poErrorSubscription = this.store
            .pipe(select(getAllPOsError))
            .subscribe((result: any) => {
                if (!!result) {
                    // alert(result.error)
                    this.showSpinner = false
                }
            })
    }

    getRowColor(state) {
        if (state === 'Not Received') {
            return 'red'
        } else if (state === 'Completed') {
            return '#00FF00'
        }
        else {
            return '#DAA520'
        }
    }

    applyFilter(filterValue: string) {
        this.dataSource.filter = filterValue.trim().toLowerCase();
        if (this.dataSource.paginator) {
            this.dataSource.paginator.firstPage();
        }
    }
}

My data looks like this. I need to get the value of state in each array and assign it to each row. Based on state value, I need to change the color of the buttons.

const result = [{
    Pomaterials: [{
        id: 1,
        state: 'not received'
    }],
    po_id: 1,
    mat_id: 3
}, {
    Pomaterials: [{
        id: 1,
        state: 'not received'
    }],
    po_id: 1,
    mat_id: 2
}];

Answer 1

Your HTML and your JSON result is confusing:

<td mat-cell *matCellDef="let element"> {{element.agent_id.company_name}} </td>

And

this.dataSource = new MatTableDataSource(result)

imply you should have an agent_id object, like:

const result = [
    {
      Pomaterials: [
        { 
         id:1,
         state:"not received"
        }
      ]
      po_id:1,
      mat_id:3,
      agent_id: {
          company_name: "Company"
      }
    },
    ...
]

Anyway, your getRowColor(state) function has a state param and you don't provide any from the HTML:

<td mat-cell *matCellDef="let element"><span class="dot" [ngStyle]="{'background-color': getRowColor()}"></span> </td>

As element is a row of your JSON result, you may try:

<td mat-cell *matCellDef="let element"><span class="dot" [ngStyle]="{'background-color': getRowColor(element.Pomaterials[0].state)}"></span> </td>

Only if your Pomaterials is always built like the JSON result you provide us.

If you need to loop over Pomaterials array for setting the state you can do something like:

this.poSuccessSubscription = this.store
    .pipe(select(getAllPOsSuccess))
    .subscribe((result: any) => {
      if (!!result) {
        ...
        this.getPos.forEach(element => {
          element.finalState = evalFinalStateElement(element.Pomaterials);
        });
        ...
      }
      ...
});

evalFinalStateElement(Pomaterials: Array<any>) {
  let finalState;
  Pomaterials.forEach(Po => {
    if(!finalState) {
      finalState = Po.state;
    }
    else if(finalState === 'XXX' && Po.state === 'YYY') {
      finalState = Po.state
    }
    // ...
  });
  return finalState;
}

And then use the defined element.finalState variable inside your HTML:

<td mat-cell *matCellDef="let element"><span class="dot" [ngStyle]="{'background-color': getRowColor(element.finalState)}"></span> </td>

with the getRowColor(state) function you posted.

Answer 2

You can send the whole POmaterials array as param of the getRowColor function and iter on elements for finding your value. Can you tell us what you want to do with your array?