Read Information from Nested Objects in DataTables

Last Updated : 10 Sep, 2026

DataTables is a jQuery plugin that adds interactive features such as searching, sorting, pagination, and column ordering to HTML tables.

When working with JSON data, the data may contain nested objects and arrays. DataTables allows you to access these nested values using the columns.data option with dot notation.

Approach: Using Dot Notation in columns.data

The DataTables columns.data option specifies which property from the JSON data should be displayed in each column.

For nested data:

  • Use dot notation to access properties inside an object.
  • Use an index with dot notation to access values inside an array.

For example:

details.designation

accesses the designation property inside the details object.

Similarly:

address.0

accesses the first value in the address array.

Example

In this example, employee data is stored in a JSON file containing nested objects and arrays. DataTables uses the columns.data option to extract and display the required values.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>
        Read Nested Object Data in DataTables
    </title>

    <meta name="viewport"
          content="width=device-width, initial-scale=1">

    <!-- DataTables CSS -->
    <link rel="stylesheet"
          href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>

    <!-- DataTables JavaScript -->
    <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
</head>

<body>

    <h2>
        Read Information from Nested Objects
        in DataTables
    </h2>

    <table id="employeeTable"
           class="display"
           style="width:100%">

        <thead>
            <tr>
                <th>Name</th>
                <th>Designation</th>
                <th>Salary</th>
                <th>Location</th>
                <th>City</th>
            </tr>
        </thead>

    </table>

    <script>
        $(document).ready(function () {

            $("#employeeTable").DataTable({

                processing: true,
                paging: true,

                ajax: "nestedJSONData.json",

                columns: [
                    {
                        data: "name"
                    },
                    {
                        data: "details.designation"
                    },
                    {
                        data: "details.salary"
                    },
                    {
                        data: "address.0"
                    },
                    {
                        data: "address.1"
                    }
                ]
            });

        });
    </script>

</body>

</html>

JSON File

Create a file named nestedJSONData.json in the same folder as the HTML file.

{
    "data": [
        {
            "name": "Tina Mukherjee",
            "details": {
                "designation": "BPO Member",
                "salary": "300000"
            },
            "address": [
                "24 Chandni Chowk",
                "Pune"
            ]
        },
        {
            "name": "Gaurav",
            "details": {
                "designation": "Teacher",
                "salary": "100750"
            },
            "address": [
                "JM Road",
                "Pune"
            ]
        },
        {
            "name": "Ashwini",
            "details": {
                "designation": "Junior Engineer",
                "salary": "860000"
            },
            "address": [
                "Santa Cruz",
                "Mumbai"
            ]
        },
        {
            "name": "Celina",
            "details": {
                "designation": "JavaScript Developer",
                "salary": "430060"
            },
            "address": [
                "Lake Side Ville",
                "Hyderabad"
            ]
        },
        {
            "name": "Aisha",
            "details": {
                "designation": "Nurse",
                "salary": "160000"
            },
            "address": [
                "RK Puram",
                "Delhi"
            ]
        }
    ]
}

Output:

The following output shows that the table showing the “searching” operation for employees having city holding string as “Pune” and so on.

Note: Since this example loads data using ajax, opening the HTML file directly using file:// may not work in some browsers due to browser security restrictions. Run the HTML and JSON files through a local web server, such as VS Code Live Server, to load the JSON data correctly.

Comment

Explore