0

I'm trying to display a map into a table using angular 6. I dont have "keyvalue" pipe Here is my object...

{
    "columns": ["col1", "col2", "col3"],
    "map":{
    "obj 1":{
        "obj aux":{
            "col1": "value1",
            "col2": "value2",
            "col3": "value3",
        }
    },
    "obj 2":{
        "obj aux":{
            "col1": "value1",
            "col2": "value2",
            "col3": "value3",
        }
    },
        "obj 3":{
        "obj aux":{
            "col1": "value1",
            "col2": "value2",
            "col3": "value3",
        }
    }
}
}

Here is my expected result:

name    | aux       | col1      | col2...
obj1.key| objaux.key| value1    |value2
obj2.key| objaux.key| value1    |value2

I've been trying something like 

 <tr *ngFor="let map1 of object.map | keys">
                            <td>{{map1.key}}</td>
                            <td *ngFor="let map2 of map1.value | keys">
                                {{map2.key}}
                            </td>
                            <td *ngFor = "let key of object.columns">{{map1.value[key]}}</td>
                        </tr>

But i get the following error:

MyComponent.html:56 ERROR TypeError: Cannot read property 'col1' of undefined

ssct79
  • 373
  • 2
  • 9
  • 17

1 Answers1

0

I think it may help.

As a workaround, take a look at this small example of a pipe that iterates over the keys:

https://stackoverflow.com/a/31537666/4863526

Pedro Henrique
  • 394
  • 1
  • 6