mat-table angular material data source format

Question

I am using Angular Material Mat-Table. how to change this data into a mat-table data source format. can someone help me to change this data as mat-table dataSource?

https://stackblitz.com/angular/jnmrolgdbaj?file=src%2Fapp%2Ftable-basic-example.ts

"timelineitems": [
    {
        "1/29/2020": {
            "new_daily_cases": 0,
            "new_daily_deaths": 0,
            "total_cases": 0,
            "total_recoveries": 0,
            "total_deaths": 0
        },
        "1/30/2020": {
            "new_daily_cases": 1,
            "new_daily_deaths": 0,
            "total_cases": 1,
            "total_recoveries": 0,
            "total_deaths": 0
        },
        "1/31/2020": {
            "new_daily_cases": 1,
            "new_daily_deaths": 0,
            "total_cases": 1,
            "total_recoveries": 0,
            "total_deaths": 0
        }
    }
]

Answer 1

Here is the way you can merge the array given by you into a iterable Array .

 const TIMELINE_ITEMS = [ { "1/29/2020": { "new_daily_cases": 0, "new_daily_deaths": 0, "total_cases": 0, "total_recoveries": 0, "total_deaths": 0 }, "1/30/2020": { "new_daily_cases": 1, "new_daily_deaths": 0, "total_cases": 1, "total_recoveries": 0, "total_deaths": 0 }, "1/31/2020": { "new_daily_cases": 1, "new_daily_deaths": 0, "total_cases": 1, "total_recoveries": 0, "total_deaths": 0 } } ]; let finalArray = []; let data = TIMELINE_ITEMS[0]; Object.keys(data).forEach((key)=>{ let obj = { date : key, ...data[key] } finalArray.push(obj); }); console.log(finalArray);

Once you have the flat array, set the table columns and datasource as below :

this.displayedColumns = Object.keys(finalArray[0]);
this.dataSource = finalArray;

Here is the working stackblitz demo : Stackblitz Demo

Answer 2

If you use as data

data=TIMELINE_ITEMS[0]

You can use as source data|keyvalue

<table mat-table [dataSource]="data|keyvalue" class="mat-elevation-z8">

And yours columns

 {{element.key}} 
 {{element.value.new_daily_cases}} 
 {{element.value.new_daily_deaths}}
 ...

In this case, which Displayed columns we can use?. Well, you can has a fake displayed columns

displayedColumns:string[]=["1","2","3","4","5","6"]

if we use the columns as show it above

See stackblitz