How can I translate my JSON structure for jQuery DataTables?

Question

I would like to build a generic CSV viewer with DataTables.

"generic" means that it should be capable to read any CSV acquired externally and represent into a Jquery DataTables

I'm starting from a JSON structure (obtained after CSV parsing) and defining this table:

Name	Surname	Age
Stefano	Rxxxx	45
Test	Dummy	50

I would then like to show as Jquery DataTables (https://datatables.net/) but it's not clear why I cannot reach my goal:

$(function() {
      data = [
          {"Name":"Stefano","Surname":"Rxxxx","Age":"45"}, 
          {"Name":"Test","Surname":"Dummy","Age":"50"}
      ]
      columns = [];
      $.each(data[0], function(k, v) {
          $('#example > thead > tr').append("<td>" + k + "</td>");
          columns.push(k);
      });
      console.log(columns);
      $('#example').DataTable({
          data: data,
          columns: columns
      });
});

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css"/>
<script src="https://code.jquery.com/jquery-3.6.1.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>

<table id='example' class='display'>
<thead><tr></tr></thead>
</table>

On consolle I have:

a WARNING

jquery.min.js:2 jQuery.Deferred exception: Cannot use 'in' operator to search for 'length' in Name TypeError: Cannot use 'in' operator to search for 'length' in Name

an ERROR

jquery.min.js:2 Uncaught TypeError: Cannot use 'in' operator to search for 'length' in Name

...but it's not clear to me what's wrong or missing in my code to translate a JSON table into a JQUERY DataTables.

Any help is appreciated.

Your snippet (here in SO) fails with jquery.dataTables.min.js:126 Uncaught TypeError: Cannot read properties of undefined (reading 'asSorting') - this is because your thead needs a tr - add that (and change the corresponding .append and your table loads at least (though has no rows/data): jsfiddle.net/45f9ob37 — fdomn-m
– fdomn-m, Commented Sep 21, 2022 at 15:18
This doesn't match the error you've reported, so the snippet doesn't match your code, so we can't reproduce the issue. — fdomn-m
– fdomn-m, Commented Sep 21, 2022 at 15:19
I'm a neubie! I've updated the latest library version on my code snippet but I'm still not able to view data in the table :( — Stefano Radaelli
– Stefano Radaelli, Commented Sep 21, 2022 at 15:35

isherwood · Accepted Answer · 2022-09-21 16:32:07Z

1

Your columns structure is not a valid DataTables structure for columns. It needs (in your case) to define the title and the data options each column needs to use.

If you change your JavaScript to build that structure, you can use columns: columns successfully (no other changes needed).

You can re-arrange your logic which builds columns as follows:

$.each(data[0], function(k, v) {
  columns.push({ title: k, data: k });
});

This builds the following output:

[ { title: 'Name', data: 'Name' }, { title: 'Surname', data: 'Surname' }, { title: 'Age', data: 'Age' } ]

Demo:

$(function() {
  data = [{
      "Name": "Stefano",
      "Surname": "Rxxxx",
      "Age": "45"
    },
    {
      "Name": "Test",
      "Surname": "Dummy",
      "Age": "50"
    }
  ]
  columns = [];
  $.each(data[0], function(k, v) {
    columns.push({
      title: k,
      data: k
    });
  });
  $('#example').DataTable({
    data: data,
    columns: columns
    //columns: [ { title: 'Name', data: 'Name' }, { title: 'Surname', data: 'Surname' }, { title: 'Age', data: 'Age' } ]

  });
});

.display {
  margin-top: 20px;
}

<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" />
  <script src="https://code.jquery.com/jquery-3.6.1.js"></script>
  <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
</head>

<body>
  <table id='example' class='display'></table>
</body>

edited Sep 21, 2022 at 16:32

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

answered Sep 21, 2022 at 16:28

andrewJames

22.6k11 gold badges32 silver badges72 bronze badges

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

1 Comment

isherwood Over a year ago

Pardon the edit. I cleaned up the markup and used the Tidy button.

isherwood · Accepted Answer · 2022-09-21 16:30:16Z

0

You can map the first object's keys to get your columns, and you can map the data to get an array of arrays, which is what DataTables expects.

$(function() {
  const data = [{
      "Name": "Stefano",
      "Surname": "Rxxxx",
      "Age": "45"
    },
    {
      "Name": "Test",
      "Surname": "Dummy",
      "Age": "50"
    }
  ];

  // get the first object's keys and dump them into an array of objects
  const columns = Object.keys(data[0]).map(i => ({title: i}));

  // get the values from each data object and add it to a new array of arrays
  const formattedData = data.map(i => Object.values(i));

  $('#example').DataTable({
    data: formattedData,
    columns: columns
  });
});

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" />

<table id='example' class='display'></table>

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

edited Sep 21, 2022 at 16:30

answered Sep 21, 2022 at 15:59

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

1 Comment

isherwood Over a year ago

Answer refactored.

Collectives™ on Stack Overflow

How can I translate my JSON structure for jQuery DataTables?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related