Stephane Karagulmez Stephane Karagulmez - 1 year ago 53
Javascript Question

Render complicated Array into Datatables

I Have a really complicated Array that I want to display in DataTables in order to do some research and csv export.

An extract here of one page : https://api.myjson.com/bins/w8pzl

This is the structure :

[
[
{
title : "title",
stacks: {
stackname : "stackname",
stackValue : [
"value1","value2","value3"
]
},
..... multiple article
],
.....multiple pages
]


I don't know neither how to structure the table nor how to populate it.
My first try so far :

<div id="page-content-wrapper">
<div class="container">
<div class="row">
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Stackname</th>
<th>stackvalue</th>
</tr>
</thead>
</table>
</div>
</div>
</div>

<script>
$(document).ready(function() {
$('#example').DataTable({
"processing" : true,
"ajax" : {
"url" : "/",
dataSrc : ''
},
"columns" : [ {
"data" : "stackName"
}, {
"data" : "stackValue[,]"
}]
});
});
</script>


But it looks like I have to go through the all document to get my information..

If it's just not possible... I've done an easier version of my structure :

[
[
{
title : "title",
stacks: [
"value1","value2","value3"
]
},
..... multiple article
],
.....multiple pages
]


But still impossible to parse it.. i'm struggling with the two first array..

Edit with answer

Thanks to the help of the selected answer post I managed to get this code working :

$('#example').DataTable( {
"processing" : true,
"ajax": {
"url": "/",
"dataSrc" : function ( json ) {
return json.reduce(function(a, b) {
return a.concat(b)
}).map(function(value) {
return value.stacks
})
.reduce(function(a, b) {
return a.concat(b)
})
}
}
,... other configuration

Answer Source

You can use the ajax.dataSrc option as a function to manipulate the data returned from the server.

ajax.dataSrc

function ajax.dataSrc( data )

As a function dataSrc provides the ability to manipulate the data returned from the server from one form into another. For example, if your data is split over multiple arrays you might combine it into a single array to return for processing and display by DataTables. ...

Here is an example.

$('#example').DataTable( {
  "ajax": {
    "url": "https://api.myjson.com/bins/w8pzl",
    "dataSrc" : function ( json ) {
      return json[0].map(function(value) {
      	return value.stacks
      })
      .reduce(function(a, b) {
      	return a.concat(b)
      })
    }
  },
  "columns": [
    { "data": "stackName" },
    { "data": "stackValue[, ]" }
  ]
});
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>

<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Stackname</th>
      <th>stackvalue</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Stackname</th>
      <th>stackvalue</th>
    </tr>
  </tfoot>
</table>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download