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

StPaulis · Accepted Answer · 2022-04-11 11:46:10Z

0

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.

answered Apr 11, 2022 at 11:46

StPaulis

2,9441 gold badge19 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Maulik Over a year ago

As I'm rendering dynamic JSON content in table, binding json to datable (updated question) how we can apply pipe in datatable options?

Collectives™ on Stack Overflow

Angular JSON pipe with angular-datatables

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related