Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to read information from nested objects in DataTables ?

  • Last Updated : 21 May, 2021

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 read information for each employee from a nested data object using the DataTables plugin.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

Approach: The DataTables plugin’s column.data option is used to extract data from the nested JSON data up to any level. The dot(.) is used for accessing another object level of the column.data option.

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

Example: The following code displays the data of all employees in an HTML table using the DataTables plugin.

Structure of employee data: The employee detail is in nested object data form.

structure of details of one employee

HTML code: The JavaScript part of the following code extracts data from the “nestedJSONData.txt” file.  In the following example, details.designation helps to get the designation for details object for each employee and details.salary gets the salary for details object. Similarly, address.0 and address.1 get the location and city 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 read information from nested 
        objects in DataTables
    </h2>
      
    <!--HTML table with employee data-->
    <table id="tableID" class="display" 
        style="width:100%">
          
        <thead>
            <!--Column headers for employee data-->
            <tr>
                <th>Name</th>
                <th>Designation</th>
                <th>Salary</th>
                <th>Location</th>
                <th>City</th>
            </tr>
        </thead>
    </table>
  
    <script>
  
        /* Initialization of datatable */
        $(document).ready(function () {
  
            /* table ID is taken for datatable access */
            $('#tableID').DataTable({
                "processing": true,
                "info": false,
  
                /* Set pagination feature */
                "paging": true,
                "ajax": 'nestedJSONData.txt',
                "columns": [
                    { "data": "name" },
  
                    // designation key of details to
                    // show designation
                    { "data": "details.designation" },
  
                    // salary key of details to show salary
                    { "data": "details.salary" },
  
                    // 0th index of address to show location
                    { "data": "address.0" },
                      
                    // 1st index of address to show City
                    { "data": "address.1" }
                ]
            });
        });
    </script>
</body>
  
</html>


nestedJSONData.txt file: The following is the content for this file having nested object data for all employees. This file is used in the above HTML code.

{
  "data": [
    {
      "name": "Tina Mukherjee",
      "details": {
        "designation": "BPO member",
        "salary": "300000"
      },
      "address": [
        "24,chandni chowk",
        "Pune"
      ]
    },
    {
      "name": "Gaurav",
      "details": {
        "designation": "Teacher",
        "salary": "100750"
      },
      "address": [
        "esquare,JM road",
        "Pune"
      ]
    },
    {
      "name": "Ashtwini",
      "details": {
        "designation": "Junior engineer",
        "salary": "860000"
      },
      "address": [
        "Santa cruz",
        "mumbai"
      ]
    },
    {
      "name": "Celina",
      "details": {
        "designation": "Javascript Developer",
        "salary": "430060"
      },
      "address": [
        "crr lake side ville",
        "tellapur"
      ]
    },
    {
      "name": "Aisha",
      "details": {
        "designation": "Nurse",
        "salary": "160000"
      },
      "address": [
        "rk puram",
        "Delhi"
      ]
    },
    {
      "name": "Brad henry",
      "details": {
        "designation": "Accountant",
        "salary": "370000"
      },
      "address": [
        "chaurasi lane",
        "Kolkatta"
      ]
    },
    {
      "name": "Harry",
      "details": {
        "designation": "Salesman",
        "salary": "130500"
      },
      "address": [
        "32, krishna nagar",
        "Navi mumbai"
      ]
    },
    {
      "name": "Rhovina",
      "details": {
        "designation": "Amazon supporter",
        "salary": "300900"
      },
      "address": [
        "Aparna zone",
        "hyderabad"
      ]
    },
    {
      "name": "Celina",
      "details": {
        "designation": "Senior Developer",
        "salary": "200000"
      },
      "address": [
        "23, chandni chowk",
        "pune"
      ]
    },         
   
   
    {
      "name": "Glenny",
      "details": {
        "designation": "Administrator",
        "salary": "200500"
      },
      "address": [
        "Nagpur",
        "Maharashtra"
      ]
    },
    {
      "name": "Brad Pitt",
      "details": {
        "designation": "Engineer",
        "salary": "100000"
      },
      "address": [
        "sainikpuri",
        "Delhi"
      ]
    },
    {
      "name": "Deepa",
      "details": {
        "designation": "Team Leader",
        "salary": "200500"
      },
      "address": [
        "Annanagar",
        "Chennai"
      ]
    },
      
   
    {
      "name": "Angelina",
      "details": {
        "designation": "CEO",
        "salary": "1000000"
      },
      "address": [
        "JM road",
        "Aundh pune"
      ]
    }
 ]
}

Output:

Before execution:

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :