CODEWITHSUNDEEP
angularangular8ngformat-tablecustom-data-type
Federico Andreoli
Federico Andreoli

Reputation: 465

Populate mat-table with multiple nested custom data on Angular 8.3.23

I know that is a little specific but i'm trying to populate a table with children of multiple nested data.

My data are organized as follows: each one of my entities has an id, a name and a curve; each curve has a value and a cusotm week, and each week has some basic fields. It's a "three level hyerarchy":

Entry:
- Id
- Name
- Curve (Map):
    • Value
    • Week(key):
        → Description (string)
        → Date

I'm trying to pupolate a mat-table with columns "Description" and "Values" of the different curves, see pictures for better explanation. (NB description is only an example, it will be a longer string)

Basic Table

How can i approach this problem? I've tried to look at the command "ngFor" and "keyvalue" but i can't get out of this...

Upvotes: 0

Views: 174

Answers (1)

Ilija Iličić
Ilija Iličić

Reputation: 507

I'm doing something like this:

For example, I have service myService with getData() where I get data and in my .ts file I have something like this:

dataTable;

this.myService.getData().subscribe((result) => {
  for (const data of result.curve) {
    result['value'] = data.value;
    result['description'] = data.week.description;
  }

this.dataTable = new MatTableDataSource(result);
})

This piece of code suppose that result JSON has a data structure like this:

{
    "id": 1,
    "name": "some name",
    "curve": {
        "value": "some value",
        "week": {
            "description": "some string",
            "date": "some Date format"
        }
    }
}

So I build data before I make new MatTableDataSource and this working fine for me. I hope that this will help you. I'm also willing to know is there any better solution for this!

Upvotes: 2

Related Questions