Render complicated Array into Datatables

Question

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

DavidDomain · Accepted Answer · 2017-05-22 22:40:32Z

3

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>

answered May 22, 2017 at 22:40

DavidDomain

15.3k4 gold badges44 silver badges52 bronze badges

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

4 Comments

Stephane Karagulmez Over a year ago

Thanks a lot mate ! I'm gonna try tis and post my result

Stephane Karagulmez Over a year ago

So I have a problem.. with the use of : return json[0].map() I only got the first element of my core json.. I need to iterate on it

Stephane Karagulmez Over a year ago

Moreover I lose the access to title

DavidDomain Over a year ago

Wasn't aware of the fact that you have several items inside the top level array. Anyway, you can reconstruct the data however you like. Just copy a small portion of it and play around with it until you find an effective way to something that can easily be handled by dataDables.

Collectives™ on Stack Overflow

Render complicated Array into Datatables

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related