Returning an array of JSON Object Datatable is not showing data .

Returning an array of JSON Object Datatable is not showing data .

ritu_debritu_deb Posts: 3Questions: 1Answers: 0

If my JSon array is of the format
{
"employee": [{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"name": "Garrett Winters",
"position": "Accountant",
"salary": "$170,750",
"start_date": "2011/07/25",
"office": "Tokyo",
"extn": "8422"
},
{
"name": "Ashton Cox",
"position": "Junior Technical Author",
"salary": "$86,000",
"start_date": "2009/01/12",
"office": "San Francisco",
"extn": "1562"
}]
}

datatable is not getting populated with the code below
$(document).ready(function() {

$('#example').dataTable( {
"sAjaxSource": "data/objects.html", // which is the above array
"sAjaxDataProp": "",

  "aoColumns": [
        { "mData": "name" },
        {"mData": "position" },
    { "mData": "salary" },
 { "mData": "start_date" },
        { "mData": "office" },
        { "mData": "extn" }


    ]
} );

} );

But when its of the format below
[{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"name": "Garrett Winters",
"position": "Accountant",
"salary": "$170,750",
"start_date": "2011/07/25",
"office": "Tokyo",
"extn": "8422"
},
{
"name": "Ashton Cox",
"position": "Junior Technical Author",
"salary": "$86,000",
"start_date": "2009/01/12",
"office": "San Francisco",
"extn": "1562"
}]

datatable is getting populated with the above code.

What code should I write to populate with the the first format where it returns an array of employee objetcts.

This question has an accepted answers - jump to answer

Answers

  • KierKier Posts: 1Questions: 0Answers: 0
    edited May 2014
    $('#example').dataTable( {
    "sAjaxSource": "data/objects.html", // which is the above array
    "sAjaxDataProp": "",
     
      "aoColumns": [
            { "mData": "employee.name" },
            {"mData": "employee.position" },
            { "mData": "employee.salary" },
            { "mData": "employee.start_date" },
            { "mData": "employee.office" },
            { "mData": "employee.extn" }
     
     
        ]
    } );
    

    The problem is that your values are a child of employee in the first example but you didn't include that in your code, so it was unable to find your values.
    For example I have a JSON that looks like this:

    {
    employee: [{
        name: "Todd",
        assets: [{
             item: "Desktop"
         }]
         name: "Joe",
         assets: [{
             item: "Laptop"
         }]
    }]
    }
    

    I would access it like so:

            { "mData": "employee.name" },
            {"mData": "employee.assets.item" },
    

    First time posting here so hopefully I have the Markdown right.

  • ritu_debritu_deb Posts: 3Questions: 1Answers: 0

    I am using the above approach but data is not showing in the datatable

  • LSDLSD Posts: 5Questions: 1Answers: 1
    Answer ✓

    Can you post a fiddle of your code?

  • ritu_debritu_deb Posts: 3Questions: 1Answers: 0

    Here is my code javascript

    $(document).ready(function() { $('#example').dataTable( { "iDisplayLength": 25, "aLengthMenu": [10, 25, 50, 100, 200], "aaSorting": [[ 7, "desc" ]], "bJQueryUI": true, "bServerSide": true, "sPaginationType": "full_numbers", "sAjaxSource": "../EmployeeDirectoryJAXRS/rest/sampleservice/employees", "sAjaxDataProp": "", "aoColumns": [ { "mData": "employee.id" }, { "mData": "employee.firstName" }, { "mData": "employee.title" }, { "mData": "employee.city" }, { "mData": "employee.officePhone" }, { "mData": "employee.cellPhone" }, { "mData": "employee.email" }, { "mData": "employee.department" }, { "mData": "employee.id", "mRender": function(data,type,full) { var display = 'Edit'; return display; } }] } ); } );

    The above ajaxSource returns the below json

    {"employee":[{"cellPhone":"42342343243","city":"Washingto DC","department":"White House","email":"barack@notmyrealmail.com","firstName":"Barack","id":"3","lastName":"Obama","officePhone":"34325253453","reportCount":"0","title":"President"},{"cellPhone":"42342343243","city":"Washingto DC","department":"White House","email":"george@notmyrealmail.com","firstName":"George","id":"4","lastName":"Bush","officePhone":"34325253453","reportCount":"0","title":"President"},{"cellPhone":"42342343243","city":"Washingto DC","department":"White House","email":"barack@notmyrealmail.com","firstName":"Hitler","id":"6","lastName":"Boon","officePhone":"34325253453","reportCount":"0","title":"President"},{"cellPhone":"42342343243","city":"Washingto DC","department":"White House","email":"barack@notmyrealmail.com","firstName":"Hrishit","id":"5","lastName":"Deb","officePhone":"34325253453","reportCount":"0","title":"President"},{"cellPhone":"346456456","city":"NY","department":"Technology","email":"john@abc.com","firstName":"John","id":"2","lastName":"Lee","officePhone":"3454353464","reportCount":"0","title":"Programmer"},{"cellPhone":"42342343243","city":"Washingto DC","department":"White House","email":"barack@notmyrealmail.com","firstName":"John","id":"7","lastName":"Mayaer","officePhone":"34325253453","reportCount":"0","title":"President"},{"cellPhone":"42342343243","city":"Washingto DC","department":"White House","email":"barack@notmyrealmail.com","firstName":"Mahatma","id":"9","lastName":"Gandhi","officePhone":"34325253453","reportCount":"0","title":"President"},{"cellPhone":"42342343243","city":"Washingto DC","department":"White House","email":"barack@notmyrealmail.com","firstName":"Manmohan","id":"10","lastName":"Singh","officePhone":"34325253453","reportCount":"0","title":"President"},{"cellPhone":"42342343243","city":"Washingto DC","department":"White House","email":"barack@notmyrealmail.com","firstName":"Mary","id":"14","lastName":"Kom","officePhone":"34325253453","reportCount":"0","title":"President"},{"cellPhone":"42342343243","city":"Washingto DC","department":"White House","email":"barack@notmyrealmail.com","firstName":"Narenda","id":"8","lastName":"Modi","officePhone":"34325253453","reportCount":"0","title":"President"},{"cellPhone":"3645645747","city":"Delhi","department":"Technology","email":"ritu@abc.com","firstName":"Rituparna","id":"1","lastName":"Deb","officePhone":"234235345345","reportCount":"0","title":"Manager"},{"cellPhone":"42342343243","city":"Washingto DC","department":"White House","email":"barack@notmyrealmail.com","firstName":"Sachin","id":"12","lastName":"Tendulkar","officePhone":"34325253453","reportCount":"0","title":"President"},{"cellPhone":"42342343243","city":"Washingto DC","department":"White House","email":"barack@notmyrealmail.com","firstName":"Sania","id":"15","lastName":"Mirza","officePhone":"34325253453","reportCount":"0","title":"President"},{"cellPhone":"42342343243","city":"Washingto DC","department":"White House","email":"barack@notmyrealmail.com","firstName":"Scott","id":"13","lastName":"Peter","officePhone":"34325253453","reportCount":"0","title":"President"},{"cellPhone":"42342343243","city":"Washingto DC","department":"White House","email":"barack@notmyrealmail.com","firstName":"Sonia ","id":"11","lastName":"Gandhi","officePhone":"34325253453","reportCount":"0","title":"President"}]}

This discussion has been closed.