How to set nested JSON data to datatables?

Question

I have a (nested) data structure containing objects and arrays. And trying to sent datatables but only one value displaying.

JSON data:

 {
"data": [{
  "name": "name1",
  "value": "value1",
  "list": [{
    "sname": "sname1",
    "svalue": "svalue1"
  }, {
    "sname": "sname2",
    "svalue": "svalue2"
  }]
}]
}

JSON data getting through URL by using Java.

jQuery code:

var pk = $("#pk").val();
console.log(pk);
url = "/register/search?id=" + pk;
console.log(url);
$('#largeTable').DataTable({
"ajax": url,
"bDestroy": true,
"columns": [{
  "data": "name"
},
{
  "data": "value"
},
{
  "data": "list.1.sname"
},
{
  "data": "list.1.svalue"
},
{
  "data": null,
  "defaultContent": editview
}
]
});

Here it is possible to display either first or second list values by using list.1 or list.0

But I want two values at a time.

This is a copy and paste from your question four hours prior. — halfer
– halfer, Commented Mar 6, 2017 at 19:46
Possible duplicate of How to get a specific or multiple values (or keys) from nested json — halfer
– halfer, Commented Mar 6, 2017 at 19:47

Abu Sulaiman · Accepted Answer · 2018-11-19 21:37:22Z

If you used render or mRender you can do what you want with the object. For example you can traverse the array like in this example.

$('#largeTable').DataTable({
    "columnDefs": [
       {"targets": [0], "title":"name", "data":"name"},
       {"targets": [1], "title":"value", "data":"value"},
       {"targets": [2], "title":"list", "data":"list", "type":"html"
            "render":function(data){
                 var listArray = data;
                 var listHtml = "";
                 for(var i=0;i<listArray.length;i++) {
                     listHtml += listArray[i].sname + " " + listArray[i].svalue + "<br>";
                 } 
                 return listHtml;
             },
    }]
});

$.ajax({
     "type":"GET",
     "url":url,
     "success":function(data,status) {
           var jsonData = $.parseJSON(data);
           $('#largeTable').dataTable().fnAddData(jsonData);
     }

Yaroslav · Accepted Answer · 2017-03-06 11:20:40Z

0

Your list in json data structure is an array. So, you should use

list.forEach(function(element) {
    //console.log(element);
});

You could create an object and build JSON dynamically and set it to "columns" array.

Here is an example:

// make an empty object
var myObject = {};

// set the "list1" property to an array of strings
myObject.list1 = ['1', '2'];

// you can also access properties by string
myObject['list2'] = [];
// accessing arrays is the same, but the keys are numbers
myObject.list2[0] = 'a';
myObject['list2'][1] = 'b';

myObject.list3 = [];
// instead of placing properties at specific indices, you
// can push them on to the end
myObject.list3.push({});
// or unshift them on to the beginning
myObject.list3.unshift({});
myObject.list3[0]['key1'] = 'value1';
myObject.list3[1]['key2'] = 'value2';

myObject.not_a_list = '11';

answered Mar 6, 2017 at 11:20

Yaroslav

4664 silver badges15 bronze badges

2 Comments

user7646838 Over a year ago

but datatable column how to fix values

Yaroslav Over a year ago

maybe it will be helpful: datatables.net/forums/discussion/32993/…

Collectives™ on Stack Overflow

How to set nested JSON data to datatables?

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related