Is there a way to showcase array data on a datatable by utilizing Ajax?

Question

Is there a way to showcase array data on a datatable by utilizing Ajax?

I am currently utilizing a MongoDB database to store some important data. I am now looking to showcase this data on an HTML Datatable.

The data that I am attempting to utilize is organized in arrays, and here is its structure:

data: [[1848, 84857], [4944, 4949], [34, 65], [3566, 78], .... ]

$(document).ready(function() {

    var table = $('#mytable').DataTable({
        "serverSide": true,
        "ajax": "/endpoint/?format=datatables",
        "columns": [

            {"data": 'data'},

        ]
    });
    setInterval( function () {
    table.ajax.reload();
}, 10000 );
});

However, the issue with my current code is that it displays the datatable in the following format:

    DATA:
[[1848, 84857], [4944, 4949], [34, 65], [3566, 78], .... ]

Whereas, I wish for it to appear as follows:

    DATA:
1848, 84857
4944, 949
36, 65 and so forth

How can I go about resolving this problem? I was contemplating using a for loop, but I am unsure how to do that since I am directly calling the data within the table variable.

The JSON response typically looks something like this:

{"data":"[[11756.53, 2.419583] .....

javascript ajax datatables

Answer 1

Answer №1

To efficiently utilize your array of array data, simply assign index key values to map your columns:

"columns": [
          {"data":0},
          {"data":1}
        ]

Check out this amazing example:

function generateRandomNumber(min, max) { // including both min and max 
  return Math.floor(Math.random() * (max - min + 1) + min);
}
$.mockjax({
    url: "/endpoint/?format=datatables",
    response: function(settings) {
      this.responseText = {
        "draw": settings.data.draw,
        "recordsTotal": 4,
        "recordsFiltered": 4,
        "data": [
          [generateRandomNumber(400, 8000), 84857], 
          [4944, 4949], 
          [34, 65], 
          [3566, 78]
        ]
      }
    }
});
var editable=false;
$(document).ready(function() {
    var table = $('#mytable').DataTable({
        "serverSide": true,
        "ajax": "/endpoint/?format=datatables",
        "columns": [
          {"data":0},
          {"data":1}
        ]
    });
    setInterval( function () {
    table.ajax.reload();
}, 10000 );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />

<table id="mytable" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th>Col1</th>
            <th>Col2</th>
          </tr>
        </thead>

        <tfoot>
          <tr>
            <th>Col1</th>
            <th>Col2</th>
          </tr>
        </tfoot>
      </table>

Answer 2

To efficiently utilize your array of array data, simply assign index key values to map your columns:

"columns": [
          {"data":0},
          {"data":1}
        ]

Check out this amazing example:

function generateRandomNumber(min, max) { // including both min and max 
  return Math.floor(Math.random() * (max - min + 1) + min);
}
$.mockjax({
    url: "/endpoint/?format=datatables",
    response: function(settings) {
      this.responseText = {
        "draw": settings.data.draw,
        "recordsTotal": 4,
        "recordsFiltered": 4,
        "data": [
          [generateRandomNumber(400, 8000), 84857], 
          [4944, 4949], 
          [34, 65], 
          [3566, 78]
        ]
      }
    }
});
var editable=false;
$(document).ready(function() {
    var table = $('#mytable').DataTable({
        "serverSide": true,
        "ajax": "/endpoint/?format=datatables",
        "columns": [
          {"data":0},
          {"data":1}
        ]
    });
    setInterval( function () {
    table.ajax.reload();
}, 10000 );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />

<table id="mytable" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th>Col1</th>
            <th>Col2</th>
          </tr>
        </thead>

        <tfoot>
          <tr>
            <th>Col1</th>
            <th>Col2</th>
          </tr>
        </tfoot>
      </table>

Is there a way to showcase array data on a datatable by utilizing Ajax?

Answer №1

Similar questions

Navigating through embedded arrays in Angular

Creating a self-chaining function in JavaScript: A guide

import external script in the head using requirejs

Difficulty with the increment of my counter when using addeventlistener

Bootstrap Carousel with descriptions in a separate container without any display or hiding transitions

Retrieving Json data results in a boolean outcome

Is it possible for npm to assist in determining the appropriate version of Primeng that is compatible with Angular 16 dependencies

Choosing the default checkbox option as selected in a ReactJS application

Adding a detached element under certain conditions

"Production environment encounters issues with react helper imports, whereas development environment has no trouble with

Creating elements in Polymer 2.0 is a breeze. Simply use the `createElement` method, then seamlessly import it using `Polymer

Issue with toggling options in q-option-group (Vue3/Quasar) when using @update:model-value

Numerous status buttons with a variety of background colors

Using Mongoose to insert a JavaScript object directly into the database

Using Javascript to dynamically enable or disable an input field depending on the choice made in another field

What is the best way to create router links on the fly in Vue.js?

Integrate with GraphQL API using Express.js

Having trouble accessing the scrollHeight property of null when using Selenium WebDriver

Cancel submission via AJAX

Storing user input from a dynamic form into a database using Kendo UI