CODEWITHSUNDEEP
javajqueryjson
user7646838
user7646838

Reputation: 41

How to set nested JSON data to datatables?

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.

Upvotes: 0

Views: 1504

Answers (2)

Abu Sulaiman
Abu Sulaiman

Reputation: 1507

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);
     }

Upvotes: 1

Yaroslav
Yaroslav

Reputation: 466

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';

Upvotes: 0

Related Questions