How to set nested JSON data to datatables?












0















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.










share|improve this question

























  • This is a copy and paste from your question four hours prior.

    – halfer
    Mar 6 '17 at 19:46











  • Possible duplicate of How to get a specific or multiple values (or keys) from nested json

    – halfer
    Mar 6 '17 at 19:47
















0















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.










share|improve this question

























  • This is a copy and paste from your question four hours prior.

    – halfer
    Mar 6 '17 at 19:46











  • Possible duplicate of How to get a specific or multiple values (or keys) from nested json

    – halfer
    Mar 6 '17 at 19:47














0












0








0








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.










share|improve this 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.







java jquery json






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Mar 6 '17 at 19:39









halfer

14.4k758109




14.4k758109










asked Mar 6 '17 at 10:53









user7646838user7646838

1410




1410













  • This is a copy and paste from your question four hours prior.

    – halfer
    Mar 6 '17 at 19:46











  • Possible duplicate of How to get a specific or multiple values (or keys) from nested json

    – halfer
    Mar 6 '17 at 19:47



















  • This is a copy and paste from your question four hours prior.

    – halfer
    Mar 6 '17 at 19:46











  • Possible duplicate of How to get a specific or multiple values (or keys) from nested json

    – halfer
    Mar 6 '17 at 19:47

















This is a copy and paste from your question four hours prior.

– halfer
Mar 6 '17 at 19:46





This is a copy and paste from your question four hours prior.

– halfer
Mar 6 '17 at 19:46













Possible duplicate of How to get a specific or multiple values (or keys) from nested json

– halfer
Mar 6 '17 at 19:47





Possible duplicate of How to get a specific or multiple values (or keys) from nested json

– halfer
Mar 6 '17 at 19:47












2 Answers
2






active

oldest

votes


















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





share|improve this answer
























  • but datatable column how to fix values

    – user7646838
    Mar 6 '17 at 11:33











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

    – Yaroslav
    Mar 6 '17 at 11:42



















0














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





share|improve this answer























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f42623722%2fhow-to-set-nested-json-data-to-datatables%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    2 Answers
    2






    active

    oldest

    votes








    2 Answers
    2






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









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





    share|improve this answer
























    • but datatable column how to fix values

      – user7646838
      Mar 6 '17 at 11:33











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

      – Yaroslav
      Mar 6 '17 at 11:42
















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





    share|improve this answer
























    • but datatable column how to fix values

      – user7646838
      Mar 6 '17 at 11:33











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

      – Yaroslav
      Mar 6 '17 at 11:42














    0












    0








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





    share|improve this answer













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






    share|improve this answer












    share|improve this answer



    share|improve this answer










    answered Mar 6 '17 at 11:20









    YaroslavYaroslav

    366414




    366414













    • but datatable column how to fix values

      – user7646838
      Mar 6 '17 at 11:33











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

      – Yaroslav
      Mar 6 '17 at 11:42



















    • but datatable column how to fix values

      – user7646838
      Mar 6 '17 at 11:33











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

      – Yaroslav
      Mar 6 '17 at 11:42

















    but datatable column how to fix values

    – user7646838
    Mar 6 '17 at 11:33





    but datatable column how to fix values

    – user7646838
    Mar 6 '17 at 11:33













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

    – Yaroslav
    Mar 6 '17 at 11:42





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

    – Yaroslav
    Mar 6 '17 at 11:42













    0














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





    share|improve this answer




























      0














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





      share|improve this answer


























        0












        0








        0







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





        share|improve this answer













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






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 19 '18 at 21:37









        Abu SulaimanAbu Sulaiman

        81011126




        81011126






























            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f42623722%2fhow-to-set-nested-json-data-to-datatables%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            MongoDB - Not Authorized To Execute Command

            in spring boot 2.1 many test slices are not allowed anymore due to multiple @BootstrapWith

            Npm cannot find a required file even through it is in the searched directory