Populate JQuery DataTable With JavaScript Array

Question

I've got what I Think is an array of objects like this console.log shows

Array(39) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]
0: Object { Name: "Jason", Grade: 12 }

What code should I use to format it so that the jQuery datatable will let me set this as the source?

https://datatables.net/

I tried to do this, but it gives me an error:

    $.myjQuery = function(testData) {
      $('#example').DataTable({
        data: testData,
        columns: [
          { title: 'Name' },
          { title: 'Grade' },
        ],
      });

The documentation in your own link is very comprehensive. This is the section you should reference: datatables.net/examples/data_sources/js_array.html — Rory McCrossan
– Rory McCrossan, Commented Jul 10, 2022 at 19:55
@RoryMcCrossan - yes I see the issue is my JavaScript array is not in the format expected. How do I manipulate my array data to mirror the needed format? — Stanley Jones
– Stanley Jones, Commented Jul 10, 2022 at 19:57
Yes, you do have an array of objects - which is totally fine for DataTables to consume, as long as the column references match the JavaScript data. Show us the contents of your JavaScript testData variable, as text, and ideally as part of a minimal reproducible example. (The link in the comments is for an array of arrays - which is different from what you have. But you don't need to convert your array of objects into an array of arrays.) — andrewJames
– andrewJames, Commented Jul 10, 2022 at 20:02
Basically, you were on the right lines except you used { title: 'Name' } in your DataTable definition, whereas you should have used { data: 'Name' }. See columns.title vs. columns.data. — andrewJames
– andrewJames, Commented Jul 10, 2022 at 20:12

mplungjan · Accepted Answer · 2022-07-10 20:06:40Z

2

Looking at the documentation

and Forums

You need

columns: [
  { data: 'Name' },
  { data: 'Grade' },
]

using your data

const dataSet = [
 { Name: "Jason", Grade: 12 },
 { Name: "Mike", Grade: 11 },
 { Name: "Freddie", Grade: 10 }]
 
$(function () {
  $('#example').DataTable({
    data: dataSet,
    columns: [
      { data: 'Name' },
      { data: 'Grade' },
    ],
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<link src="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" />

<table id="example" class="display" width="100%"></table>

Or THIS when converting to nested arrays

const yourArray = [
 { Name: "Jason", Grade: 12 },
 { Name: "Mike", Grade: 11 },
 { Name: "Freddie", Grade: 10 }]
 
 const dataSet = yourArray.map(({Name,Grade}) => [Name,Grade])
$(function () {
  $('#example').DataTable({
    data: dataSet,
    columns: [
      { title: 'Name' },
      { title: 'Grade' },
    ],
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<link src="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" />

<table id="example" class="display" width="100%"></table>

edited Jul 10, 2022 at 20:06

answered Jul 10, 2022 at 19:59

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Stanley Jones Over a year ago

understood what is needed. How do I alter my data to meet the requirements?

Rory McCrossan Over a year ago

That's what this code is doing, modifying your data in to the right format

mplungjan Over a year ago

Even better, I managed to do it with your data

Collectives™ on Stack Overflow

Populate JQuery DataTable With JavaScript Array

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related