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
        }
    }
]

@programoholic I want data in this type {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'}, {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'}, { date:1/29/2020 , "new_daily_cases": 1,"new_daily_deaths": 0, "total_cases": 1,"total_recoveries": 0,"total_deaths": 0}, { date:1/30/2020 , "new_daily_cases": 1,"new_daily_deaths": 0,"total_cases": 1, "total_recoveries": 0,"total_deaths": 0}, — Harshal
– Harshal, Commented Mar 30, 2020 at 9:52
@programoholic { "date":"1/29/2020", "new_daily_cases": 0, "new_daily_deaths": 0, "total_cases": 0, "total_recoveries": 0, "total_deaths": 0 }, { "date":"1/30/2020", "new_daily_cases": 1, "new_daily_deaths": 0, "total_cases": 1, "total_recoveries": 0, "total_deaths": 0 }, — Harshal
– Harshal, Commented Mar 30, 2020 at 10:08

programoholic · Accepted Answer · 2020-03-30 10:27:14Z

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

answered Mar 30, 2020 at 10:27

programoholic

5,2545 gold badges26 silver badges63 bronze badges

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

1 Comment

Eliseo Over a year ago

you can also use the keyvalue pipe, see my answer

Eliseo · Accepted Answer · 2020-03-30 11:24:39Z

1

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

answered Mar 30, 2020 at 11:24

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Collectives™ on Stack Overflow

mat-table angular material data source format

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related