How to load data from nested arrays in DataTables ?

Last Updated : 29 Jul, 2024

DataTables are a modern jQuery plugin for adding interactive and advanced controls to HTML tables for a webpage. It is a very simple-to-use plug-in with a variety of options for the developer’s custom changes as per the application need. The plugin’s features include pagination, sorting, searching, and multiple-column ordering.

In this article, we will learn to read information for each employee from a nested array using the DataTables plugin.

Approach: The DataTables plugin's column.data option is used to extract data from arrays using the dot notation. The dot(.) is used for accessing arrays or subarrays of the column.data option. The following implementation shows the reading of arrays.

The pre-compiled files which are needed to implement are

CSS:

https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css

JavaScript:

https://code.jquery.com/jquery-3.5.1.js
https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js

Structure of nested arrays: The following structure holds data for one employee. The key "name" holds values for first and last name, key "details" holds values for designation and salary followed with keys "location" and "city" with respective values.

Example: The following code displays the data of all employees in an HTML table using the DataTable plugin. The JavaScript part of the following code extracts data from the "nestedSubarrays.txt" file. In the following example details.0 helps to get the Designation and details.1 helps to get the Salary for each employee. Similarly "data": "location" get the location for that particular employee.

HTML

<!DOCTYPE html>
<html>

<head>
    <meta content="initial-scale=1, maximum-scale=1, 
        user-scalable=0" name="viewport" />
    <meta name="viewport" content="width=device-width" />

    <!--Datatable plugin CSS file -->
    <link rel="stylesheet" href=
"https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />
    
    <!--jQuery library file -->
    <script type="text/javascript" 
        src="https://code.jquery.com/jquery-3.5.1.js">
    </script>

    <!--Datatable plugin JS library file -->
    <script type="text/javascript" src=
"https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js">
    </script>
</head>

<body>
    <h2>
        How to load data from nested 
        arrays in DataTables
    </h2>
    
    <!--HTML table with employee data-->
    <table id="tableID" class="display" 
        style="width:100%">
        
        <thead>
            <!--Required column headers 
                for employee -->
            <tr>
                <th>Name</th>
                <th>Location</th>
                <th>Designation</th>
                <th>Salary</th>
            </tr>
        </thead>
    </table>

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

            /* Initialization of datatable 
            by table ID */
            $('#tableID').DataTable({
                "processing": true,

                /* Disabled features for not 
                showing extra info */
                "info": false,
                "ordering": false,
                "paging": false,
                "ajax": 'nestedSubarrays.txt',
                "columns": [
                    // 0th index value of name 
                    // to show firstname                       
                    { "data": "name.0" },
                    { "data": "location" },

                    // 0th index value of details 
                    // to show designation                                
                    { "data": "details.0" },
                    
                    // 1st index value of details 
                    // to show salary                                
                    { "data": "details.1" }
                ]
            });
        });
    </script>
</body>

</html>

nestedSubarrays.txt: The following is the data content for all the employees in the "nestedSubarrays.txt" file.

{
  "data": [
    {
      "name": [
        "Ashwini",
        "Sharma"
      ],
      "details": [
        "System Architect",
        "Rs.320,800"        
      ],
      "location": "chandni chowk",
      "city": "Delhi"
    },
     {
      "name": [
        "Rakesh",
        "Trivedi"
      ],
      "details": [
        "Solution Architect",
        "Rs.420,800"        
      ],
      "location": "tellapur",
      "city": "Hyderabad"
    },
     {
      "name": [
        "Ashu",
        "Rana"
      ],
      "details": [
        "Accountant",
        "Rs.120,100"        
      ],
      "location": "lal chowk",
      "city": "Punjab"
    },
     {
      "name": [
        "Nupur",
        "Joshi"
      ],
      "details": [
        "Developer",
        "Rs.520,800"        
      ],
      "location": "Nallagandla",
      "city": "Bangalore"
    },
     {
      "name": [
        "Jyotsna",
        "Sharma"
      ],
      "details": [
        "Teacher",
        "Rs.120,800"        
      ],
      "location": "New street",
      "city": "Delhi"
    },
     {
      "name": [
        "Rajni",
        "Singh"
      ],
      "details": [
        "System Admin",
        "Rs.220,800"        
      ],
      "location": "Attapur",
      "city": "Nagpur"
    },
     {
      "name": [
        "Tara",
        "Sharma"
      ],
      "details": [
        "Tech lead",
        "Rs.520,800"        
      ],
      "location": "chandni chowk",
      "city": "Pune"
    },
     {
      "name": [
        "Ashmita",
        "Sahoo"
      ],
      "details": [
        "System Lead",
        "Rs.120,800"        
      ],
      "location": "chandni street",
      "city": "Rajasthan"
    },
     {
      "name": [
        "Tony",
        "Blair"
      ],
      "details": [
        "System Architect",
        "Rs.620,800"        
      ],
      "location": "New lane",
      "city": "Dharmshala"
    },
     {
      "name": [
        "Katrina",
        "Kaif"
      ],
      "details": [
        "Engineer",
        "Rs.320,800"        
      ],
      "location": "chandni chowk",
      "city": "Mumbai"
    },
     {
      "name": [
        "John",
        "Doe"
      ],
      "details": [
        "System Engineer",
        "Rs.320,800"        
      ],
      "location": "Anna nagar",
      "city": "Delhi"
    },
     {
      "name": [
        "Maya",
        "Sharma"
      ],
      "details": [
        "Architect",
        "Rs.520,800"        
      ],
      "location": "Sainikpuri",
      "city": "Hyderabad"
    }
 ]
}

Note: Suppose the above file data pattern is not according to the proper JSON format, then it throws a DataTable plugin's warning as follows.

warning: table id={id-of-html-table} - Invalid JSON response.