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.
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=
"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.Output:
- 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.
Similar Reads
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
2 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,
4 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,
4 min read
How to load data from JSON into a Bootstrap Table?
This article describes how a Bootstrap Table is created using a given JSONÂ data. The data can be retrieved by either importing it or representing it in JavaScript. The following are given two methods to do it. Displaying JSON data without importing any file: The JSON file that has to be read can be
4 min read
How to build an HTML table using ReactJS from arrays ?
To build an HTML table using ReactJS from arrays we can use the array methods to iterate to iterate the elements and create the table rows Prerequisites:NPM & Node.jsReact JSJavaScript Array.map()HTML TableApproach: To build an HTML table from an array of elements using ReactJS, we can use the a
2 min read
How to import data from .CSV file into MySQL table using Node.js ?
What is .CSV file? The .CSV (Comma Separated Values) files are plain text files that contains a list of data separated by comma(,). It is a format best used for tabular data, row, and columns, exactly like a spreadsheet, just the difference is that the file is in the form of plain text. The idea of
4 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 eas
3 min read
How to Implement Charts from External Files using CanvasJS ?
In this article, we will learn to implement bar and column charts from JSON and CSV external files using the Canvas JS plugin.Bar charts are the pictorial representation of data in groups, either in horizontal or vertical bars where the length of the bar represents the value of the data present on t
4 min read
How to export our DataGrid as CSV in ReactJS ?
GridToolbarExport Component allows the user to access the displayed data and export the DataGrid to CSV in React JS, with an extra API call. Material UI for React has this component available for us, and it is very easy to integrate. We can use the following approach in ReactJS to export our DataGri
3 min read
How to fetch data from JSON file and display in HTML table using jQuery ?
The task is to fetch data from the given JSON file and convert data into an HTML table. Approach: We have a JSON file containing data in the form of an array of objects. In our code, we are using jQuery to complete our task. The jQuery code uses getJSON() method to fetch the data from the file's loc
3 min read