How to display nested arrays as rows in Angular Material Table?

Question

I am trying to display table of error logs(applicationErrors array) in angular mat-table from below JSON looking like this: Respone JSON

I want to display my table like this:

Production name | Application name | Request Time | Log

Fifth Production | Fifth Application | 2020... | log error

Fifth Production | Fifth Application | 2020... | next log error

Any ideas how i should iterate through this to get above result?

In "normal" table it's easy to do but i have no idea how to do this in mat-table(i want to use pagination and filtering via column).

Answer 1

you can simply do this by using the for loop and iterating it through your array.

You just have to maintain an array that would be used to display the data in the table.

Please use the below code to achieve your requirement.

Let dataArray:any[]=[];
this.data.forEach((production)=>{
  production.application.forEach((application)=>{
     application.applicationErrors.forEach((error)=>{
      let obj = {'product':production.name,'application':application.name,'request time':error.requestTime,'log':error.log}
     dataArray.push(obj)
  })
}) 

})