angular js data table issue with nested object

Question

I am using angular js datatable for my project. Currently I am trying to access below object,

 "finalizedArr":[ 
 { 
 "treaceId":"KYC454353545", 
 "approval":[ 
 { 
 "usr":"kalindu kumara", 
 "threshold":100 
 }, 
 { 
 "usr":"kuma kalil", 
 "threshold":80 
 }, 
]}
]

I am using below code sample to generate table. This is the main part code

 $scope.dtColumns = [
 DTColumnBuilder.newColumn('traceId').withTitle('Trace ID'),
 DTColumnBuilder.newColumn('approval.usr').withTitle('Name'),
 DTColumnBuilder.newColumn('approval.threshold').withTitle('Match Strength %')
];

When I use this code, treaceId column is correctly rendered in the table. but 'usr' and 'threshold' not rendered. I think reason is ,usr and threshold inside the array. but i do not know how to modify this. Can you check my issue

Answer 1

Out-of-the-box ngTable dynamic expects column.field to be property names, not navigators. (i.e. it doesn't handle dot syntax oneProperty.anotherProperty as it effectively does columnObject["fieldNameYouProvided"])

You could try a similar solution as noted here or you could try mapping your data model to a flat object.

Lastly, approval.usr and approval.threshold are not valid property accessors for the provided data model because approval is an array so to access the first values you would access them with approval[0].usr and approval[0].threshold which will not work as a dynamic column field property value for the aformentioned reasons.