Open In App

How to load data from nested arrays in DataTables ?

Last Updated : 04 Apr, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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.

row data 

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=
      
    <!--jQuery library file -->
    <script type="text/javascript" 
    </script>
  
    <!--Datatable plugin JS library file -->
    <script type="text/javascript" src=
    </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.

Output:

  • Before execute:

                     

  • After execute: The following output shows that the table showing the “searching” operation for employees having designation holding “System” prefix like “System Architect”, “System Lead” and so on.

                            

                

Designation search



Similar Reads

How to load JSON data in DataTables from text file for pagination ?
We are very familiar with HTML tables which are used for storing related data. DataTables are a modern jQuery plugin for adding interactive and advanced controls to HTML tables for our webpages. Some features of DataTables are sorting, searching, pagination, and ordering of data. Many ways are available to get data into DataTables. In this article,
2 min read
How to load data from JavaScript array using jQuery DataTables plugin ?
DataTables are a modern jQuery plugin for adding interactive and advanced controls to HTML tables for our webpages. It is a simple-to-use plug-in with a huge range of options for the developer's custom changes. The common features of the DataTable plugin are paging, multiple column ordering, sorting, and searching. The pre-compiled files which are
2 min read
Handling nested data objects using jQuery DataTables plugin
DataTables are a modern jQuery plugin for adding interactive and advanced controls to HTML tables for our webpage. It is a simple-to-use plug-in with many options for the developer's custom changes. The common features of DataTables are sorting, ordering, searching, and pagination. DataTables can easily read information for the columns from any nes
3 min read
How to read information from nested objects in DataTables ?
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
4 min read
How to demonstrate the use of Ajax loading data in DataTables ?
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
4 min read
How to Create Nested Arrays from a Nest of Arrays in JavaScript ?
Creating nested arrays from a nest of arrays in JavaScript involves organizing multiple arrays into a hierarchical structure, which is often useful for managing and representing complex data relationships. This process entails encapsulating arrays within other arrays to form multi-dimensional structures. Such nested arrays can represent various dat
3 min read
DataTables processing Option
DataTables is jQuery plugin that can be used for adding interactive and advanced controls to HTML tables for the webpage. This also allows the data in the table to be searched, sorted, and filtered according to the needs of the user. The DataTable also exposes a powerful API that can be further used to modify how the data is displayed. The processi
3 min read
DataTables info Option
DataTables is jQuery plugin that can be used for adding interactive and advanced controls to HTML tables for the webpage. This also allows the data in the table to be searched, sorted, and filtered according to the needs of the user. The DataTable also exposes a powerful API that can be further used to modify how the data is displayed. The info opt
3 min read
How to implement column specific search filter using DataTables plugin ?
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's need. The plugin’s features include pagination, sorting, searching, and multiple-column ordering. In this article, w
4 min read
Pagination using Datatables
DataTables are a modern jQuery plugin for adding interactive and advanced controls to HTML tables for the webpage. In this article, we will learn to implement pagination using DataTables. Other features include sorting and multiple column ordering. The pre-compiled files which are needed to implement codes are CSS: &lt;link rel="stylesheet" href="h
3 min read