Angular JSON pipe with angular-datatables - json

Question

I'm using angular-datatables to display NoSQL de-normalized data in grid for visualization purpose,
I have few complex nested json objects and wanted to display specific cell with prettified json with inbuilt JsonPipe
I'm using datatables with data binding as
<table id="dtTable" datatable [dtOptions]="data"></table>
Sample JSON
[
{
"Id": "1",
"Name": "Test",
"Account": {
"Id": "12",
"Name": "Stackoverflow",
"Contact": {
"Id": "23",
"Name": "stack exchange",
"Phone1": "712426",
"Phone2": "490591",
"Address": {
"Id": "12",
"Name": "Address 1",
"AddressType": "commercial"
}
}
},
"CreatedBy": {
"Id": "123",
"Name": "User 1"
},
"CreatedDate": "2022-04-11T10:42:28.7525823Z",
"ModifiedBy": {
"Id": "124",
"Name": "User 2"
},
"ModifiedDate": "2022-04-11T10:42:28.7525823Z"
},
{
...
},
...
]
want to render as
Id
Name
Account
Created By
1
Test
{ Pretified JSON}
{Json}
Do we have any option to render entire json content in specific column cell of tables using angular-datatables? or do we have any other option other than json pipe to display formatted json content in angular-datatables

Answer 1

Yes, you can use the build in pipe as you mentioned:
In HTML directly:
...
<td>{{accountInfo | json}}</td>
...
Or in TS file using the transform function.
...
this.accountInfo = this.jsonPipe.transform(response.accountInfo)
...
If you use the transform function, be sure that the Pipe is imported properly in the TS file.