render columns value in nested json objects in JQuery Datatables

Question

I want to render column data of nested json object to JQuery Datatable Cell. I tried several hours for this but didn't able to achieve. Following is my Json result.

JSON

    [
    {
        "auditSectionId": 2,
        "associateAuditId": 2,
        "associateAudit": {
            "id": 2,
            "auditTitle": "Duis id justo quis nibh facilisis rutrum.",
            "year": 2011,
            "term": 1,
            "createdUser": null,
            "createdUserUserId": 2,
            "createdDate": "2018-05-19T11:16:13.553",
            "lastUpdatedUser": null,
            "lastUpdatedUserUserId": null,
            "lastUpdatedDate": null,
            "updatedCount": 0,
            "isDeleted": false,
            "auditOfAuditSection": []
        },
        "auditAreaDepartmentId": 1,
        "auditArea": {
            "departmentId": 1,
            "departmentName": "MIS",
            "location": "D Block Ground Flow",
            "description": "All are qualified",
            "personInIncharge": null,
            "personInInchargeEmployeeId": 23,
            "responsibleDepartmentForCalibrationLog": null,
            "responsibleDepartmentForServiceLog": null,
            "locationOfEquipment": null,
            "departmentOfAuditSection": []
        },
        "plannedDateTime": "2018-05-01T13:00:00",
        "conductedDateTime": "2018-05-09T11:30:00",
        "auditor": [
            {
                "teamMember": {
                    "schedules": [],
                    "employeeId": 2,
                    "employeeNo": "00005339",
                    "employeeStatus": true,
                    "epfNo": "00000325",
                    "nameWithInitial": "R E PRASANDINI",
                    "callingName": "Erandika",
                    "department": {
                        "departmentId": 1,
                        "departmentName": "MIS",
                        "location": "D Block Ground Flow",
                        "description": "All are qualified",
                        "personInIncharge": null,
                        "personInInchargeEmployeeId": 23,
                        "responsibleDepartmentForCalibrationLog": null,
                        "responsibleDepartmentForServiceLog": null,
                        "locationOfEquipment": null,
                        "departmentOfAuditSection": []
                    },
                    "departmentDepartmentId": 1,
                    "appoinmentDate": "2011-11-08T00:00:00",
                    "designation": "Production Executive",
                    "isResigned": false,
                    "resignedDate": "2017-02-07T00:00:00",
                    "isTerminated": false,
                    "isRetired": false,
                    "isTrainee": false,
                    "isSkilled": false,
                    "isUnSkilled": false,
                    "isSemiSkilled": false,
                    "isManagerial": false,
                    "isContract": false,
                    "contractEndDate": "2016-07-15T00:00:00",
                    "isSupervisor": false,
                    "isSecurity": false,
                    "isOfficeStaff": true,
                    "isTechnical": false,
                    "qualifications": "",
                    "gender": "Female",
                    "profile": null,
                    "profileId": 1,
                    "personInIncharge": null,
                    "recieverCommunication": null,
                    "senderCommunication": null,
                    "responsiblePersonForCalibrationLog": null,
                    "responsiblePersonForServiceLog": null,
                    "employeeCommunicationAchievementResponsibility": null
                },
                "teamMemberEmployeeId": 2,
                "allowableScope": "Duis id justo quis nibh facilisis rutrum.",
                "qualification": "Duis id justo quis nibh facilisis rutrum.",
                "experience": "Duis id justo quis nibh facilisis rutrum.",
                "isActive": true,
                "section": []
            }
        ],
        "createdUser": null,
        "createdUserUserId": 2,
        "createdDate": "2018-05-19T11:24:26.907",
        "lastUpdatedUser": null,
        "lastUpdatedUserUserId": null,
        "lastUpdatedDate": null,
        "updatedCount": 0,
        "isDeleted": false
    }
]

The problem arise with following json data segment

"auditor": [
        {
            "teamMember": {
                "schedules": [],
                "employeeId": 2,
                "employeeNo": "00005339",
                "employeeStatus": true,
                "epfNo": "00000325",
                "nameWithInitial": "R E PRASANDINI",
                "callingName": "Erandika",
                "department": {
                    "departmentId": 1,
                    "departmentName": "MIS",
                    "location": "D Block Ground Flow",
                    "description": "All are qualified",
                    "personInIncharge": null,
                    "personInInchargeEmployeeId": 23,
                    "responsibleDepartmentForCalibrationLog": null,
                    "responsibleDepartmentForServiceLog": null,
                    "locationOfEquipment": null,
                    "departmentOfAuditSection": []
                },
                "departmentDepartmentId": 1,
                "appoinmentDate": "2011-11-08T00:00:00",
                "designation": "Production Executive",
                "isResigned": false,
                "resignedDate": "2017-02-07T00:00:00",
                "isTerminated": false,
                "isRetired": false,
                "isTrainee": false,
                "isSkilled": false,
                "isUnSkilled": false,
                "isSemiSkilled": false,
                "isManagerial": false,
                "isContract": false,
                "contractEndDate": "2016-07-15T00:00:00",
                "isSupervisor": false,
                "isSecurity": false,
                "isOfficeStaff": true,
                "isTechnical": false,
                "qualifications": "",
                "gender": "Female",
                "profile": null,
                "profileId": 1,
                "personInIncharge": null,
                "recieverCommunication": null,
                "senderCommunication": null,
                "responsiblePersonForCalibrationLog": null,
                "responsiblePersonForServiceLog": null,
                "employeeCommunicationAchievementResponsibility": null
            },

I want to render auditor namewithinitials column which nested in auditor.teamMember into JQuery Datatables cell. The AuditorSection and Employee tables have many to many relationship. So far I wrote JQuery Datatable render method as follow

{
  data: "auditor.[,].teamMember",
  render: function (data, type, row) {                                
         alert(data.nameWithInitial);
         return data;
    }
 }

But it won't work. I'm new to Datatables. So please give me any help and suggestion to solve this. Thanks

PNP · Accepted Answer · 2018-05-23 06:17:08Z

2

Thanks all I found the solution. I just need to do is getting teamMember.callingName object from auditor object array.

{
    //8
    data: "auditor.[,].teamMember.callingName",
    render: function (data, type, row) {
       return data;
    }
}

answered May 23, 2018 at 6:17

PNP

3715 silver badges17 bronze badges

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

Comments

carlitos · Accepted Answer · 2020-01-25 23:07:04Z

In this data JSON schema that i'm working with:

{
  id: 3271,
  date: "2019-12-18",
  description: "Lots of text",
  agreements: [
    {
      agreement: {
        description: "Ok. "
      }
    }
  ]
}

I was having trouble accessing JSON data like above, this is I could solve it


$('.table-data-correspondencia').DataTable({
        "ajax": {
            "processing": true,
            "url": "agreements_data.json",
            "dataSrc": ""
        },
        "columns": [
            { "data": "id" },
            { "data": "date" },
            { "data": "description" },
            { "data": "agreements.[,].agreement.description" },
        ],
            "lengthChange": false,
            "bSort": false,
        responsive: true,
            language: {
                search: "_INPUT_",
                searchPlaceholder: "Buscar",
                info: "Mostrando _PAGE_ de _PAGES_",
                "paginate": {
                    "next": "Siguiente página",
                    "previous": "Página Anterior"
                }
            }
        });

I hope this can help someone!

Collectives™ on Stack Overflow

render columns value in nested json objects in JQuery Datatables

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related