複雑な配列をデータテーブルにレンダリングする

Question

私はいくつかの研究とcsvエクスポートを行うために、DataTableに表示したいと思う複雑な配列を持っています。

ここでは1ページの抽出物は：私はテーブルもどのようにそれを移入を構成するどちらの方法がわからない

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

：https://api.myjson.com/bins/w8pzl

これは構造体です。 私の最初は、これまでに試してみてください。

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

しかし、私は私の情報を取得するために、すべての文書を通過しているように見えます...

それだけではできません場合は...私は簡単に行ってきました私の構造のバージョン：

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

しかし、まだそれを解析することは不可能..私は、二つの第一のアレイで苦労しています。..

編集ウィット時間解答選択解答ポストの助けに

おかげで私は、このコードの作業を取得するために管理：

$('#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 1

あなたは、サーバーから返されたデータを操作するための関数としてajax.dataSrcオプションを使用することができます。

ajax.dataSrc

機能ajax.dataSrc（データ）

dataSrcのを別に一つの形式からサーバから返されたデータを操作する能力を提供する機能です。たとえば、データが複数の配列に分割されている場合、それらを1つの配列に結合して、DataTableによる処理と表示に戻ります。 ...

ここは例です。

$('#example').DataTable({ 
 
    "ajax": { 
 
    "url": "https://api.myjson.com/bins/w8pzl", 
 
    "dataSrc" : function (json) { 
 
     return json[0].map(function(value) { 
 
     \t return value.stacks 
 
     }) 
 
     .reduce(function(a, b) { 
 
     \t 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>