Angular JSON pipe with angular-datatables

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.