Render complicated Array into Datatables

Render complicated Array into Datatables

adobeSlashadobeSlash Posts: 3Questions: 1Answers: 0

Hello,

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..

Answers

  • bindridbindrid Posts: 730Questions: 0Answers: 119

    it might be easier to use a render function that will let you go right after the data you want

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    There is an outer array wrapping the whole lot, which I think is where the primarily primarily is. Can you drop the outer array so you simply have an array of objects? At the moment the outer array has only a single entry in it - another array.

    Also how are you wanting this to render? In DataTables the array passed in must be one entry for one row.

    Allan

  • adobeSlashadobeSlash Posts: 3Questions: 1Answers: 0

    Hi Allan, thanks for your consideration.
    Actually there is only one element in the primarily but it's just an example.
    I post my code on Heroku so you can have a more precise example of what i'm doing.

    https://apiwitj.herokuapp.com/

    I'm able to use the first element of this first array using this way :

    "processing" : true,
      "ajax": {
        "url": "/",
        "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[, ]" }
      ],
    

    But I don't know how to iterate on every element of this first array

  • adobeSlashadobeSlash Posts: 3Questions: 1Answers: 0

    Ok I found a way by using a reduce on the main array

    $('#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 here
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Perfect - that looks good to me. Thanks for posting back with your solution!

    Regards,
    Allan

This discussion has been closed.