How to access object inside array in json file using data-table in bootstrap

Question

JSON data:

[{"kContentProcessing":1,"appData":{"kAppData":1,"name":"500px.com"},"owner":"Sup Julius.","cp_status":"done","dv_status":"done","iibe_status":"done","cp_req":"no","dv_req":"no","iibe_req":"no","createdate":"2015-08-03"},{"kContentProcessing":2,"appData":{"kAppData":2,"name":"9gag.com"},"owner":"amey","cp_status":"done","dv_status":"done","iibe_status":"done","cp_req":"no","dv_req":"no","iibe_req":"no","createdate":"2015-08-10"},{"kContentProcessing":3,"appData":{"kAppData":3,"name":"abc.go.com"},"owner":"jack","cp_status":"done","dv_status":"done","iibe_status":"done","cp_req":"done","dv_req":"done","iibe_req":"done","createdate":"2015-08-11"},{"kContentProcessing":4,"appData":{"kAppData":3,"name":"abc.go.com"},"owner":"jill","cp_status":"done","dv_status":"done","iibe_status":"done","cp_req":"done","dv_req":"done","iibe_req":"done","createdate":"2015-08-11"},{"kContentProcessing":5,"appData":{"kAppData":5,"name":"aliexpress.com"},"owner":"jones","cp_status":"done","dv_status":"done","iibe_status":"done","cp_req":"done","dv_req":"done","iibe_req":"done","createdate":"2015-08-11"},{"kContentProcessing":6,"appData":{"kAppData":6,"name":"allthecooks.com"},"owner":"Mark","cp_status":"done","dv_status":"done","iibe_status":"done","cp_req":"done","dv_req":"done","iibe_req":"done","createdate":"2015-08-11"},{"kContentProcessing":7,"appData":{"kAppData":7,"name":"bigoven.com"},"owner":"jons","cp_status":"done","dv_status":"done","iibe_status":"done","cp_req":"done","dv_req":"done","iibe_req":"done","createdate":"2015-08-11"},{"kContentProcessing":8,"appData":{"kAppData":8,"name":"bookmyshow.com"},"owner":"joes","cp_status":"done","dv_status":"done","iibe_status":"done","cp_req":"done","dv_req":"done","iibe_req":"done","createdate":"2015-08-11"},{"kContentProcessing":9,"appData":{"kAppData":9,"name":"crackle.com"},"owner":"jnes","cp_status":"done","dv_status":"done","iibe_status":"done","cp_req":"done","dv_req":"done","iibe_req":"done","createdate":"2015-08-11"},{"kContentProcessing":10,"appData":{"kAppData":10,"name":"eat24.com"},"owner":"ones","cp_status":"done","dv_status":"done","iibe_status":"done","cp_req":"done","dv_req":"done","iibe_req":"done","createdate":"2015-08-11"}]

HTML:

<th data-field=appData.name[0] data-sortable="True" data-align="center" id="o">Name</th>

So how can I access name field using data-field?

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

SOLUTION

You can do that by setting data-column-defs attribute for table element

<table id="example" class="display" cellspacing="0" width="100%" data-column-defs='[{"targets":0,"data":"appData.name"}]'>

According to the manual:

There are two important points to consider when using data-* attributes as initialization options:

jQuery will automatically convert from dashed strings to the camel case notation used by DataTables (e.g. use data-page-length for pageLength).

If using a string inside the attribute it must be in double quotes (and therefore the attribute as a whole in single quotes). This is another requirement of jQuery's due to the processing of JSON data data.

However instead of using data- attributes you can use initialization option columnDefs directly.

DEMO

See this jsFiddle for code and demonstration.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 17, 2015 at 21:31

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

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

Collectives™ on Stack Overflow

How to access object inside array in json file using data-table in bootstrap

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related