Handling nested data objects using jQuery DataTables plugin

08 Jan, 2021
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 nested JSON data source or arrays. The developer can try out many options given as per the application’s need.
The pre-compiled files needed for code implementation are as follows.
JavaScript:
https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js
CSS:
https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css
Example: The following example demonstrates the Ajax loading of nested JSON data objects in DataTables with client-side processing. The option used is columns.data property.
The following is the nested data for many users with their details like name, address, designation, and salary. This sample data is used in the following code.
Filename: nestedJSONdata.txt 
{
  "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"
      ]
    }
 ]
}
Filename: index.html
HTML
<!DOCTYPE html><html lang="en"><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>Handling nested objects using jQuery Datatables </h2>  <!--HTML tables with user data-->  <table id="tableID" class="display" style="width:100%">    <thead>      <tr>        <th>Name</th>        <th>Designation</th>        <th>Address</th>        <th>City</th>        <th>Salary</th>      </tr>    </thead>  </table>  <script>      // Initialization of datatables      $(document).ready(function () {        $('#tableID').DataTable({          "processing": true,          "ajax": "nestedJSONdata.txt",          "columns": [            { "data": "name" },            { "data": "details.designation" },            { "data": "address.0" },            { "data": "address.1" },            { "data": "details.salary" }          ]        });      });  </script></body></html>
Common error: The very common error which occurs in DataTables is Invalid JSON response. When the data tables are loaded with data, it expects valid JSON. If it encounters invalid data in the JSON structure, it throws the following warning.
DataTables warning: table id={tableID} - Invalid JSON response
Where tableID is the id of the HTML table as in the above code implementation.
Output: The following output is shown in the case of valid JSON.
Before execution:
After execution:
jQuery-Plugin
CSS
HTML
JQuery
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
Form validation using jQuery
Design a web page using HTML and CSS
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Design a Tribute Page using HTML & CSS