DataTables複数のJSON配列の複数のテーブル

Question

同じJSONソース内の2つの別々の配列から2つのテーブルを出力したいのですが、何らかの理由で私のコードが機能しません。

JSONメッセージ：

{ 
    "Policies": [ 
    { 
     "name": "A", 
     "id": "1", 
     "score": "0" 
    } 
    ], 
    "Services": [ 
    { 
     "name": "B", 
     "id": "2", 
     "score": "0" 
    } 
    ] 
} 

HTMLコード：

<table id="policies-table" class="display" cellspacing="0" width="100%"> 
    <thead> 
    <tr> 
     <th>Name</th> 
     <th>ID</th> 
     <th>Score</th> 
    </tr> 
    </thead> 
</table> 
<table id="services-table" class="display" cellspacing="0" width="100%"> 
    <thead> 
    <tr> 
     <th>Name</th> 
     <th>ID</th> 
     <th>Score</th> 
    </tr> 
    </thead> 
</table> 

JavaScriptのコード：

var the_url = "www.example.com" 

var columnsDef = [ 
    { data : "name" }, 
    { data : "id" }, 
    { data : "score" } 
]; 

$(document).ready(function() { 
    $('#policies-table').DataTable({ 
     ajax : { 
     url : the_url, 
     dataSrc: "Policies" 
       }, 
     columns : columnsDef 
}), 

    $('#services-table').DataTable({ 
     ajax : { 
     url : the_url, 
     dataSrc: "Services" 
       }, 
     columns : columnsDef 
}) 
}); 

Answer 1

あなたのJSON変数を反復処理されていません。 prabodhprakashが示唆しているように、「ポリシー」と「サービス」を書くことは役に立ちません。

私はあなたがあなたが単一のものを初期化するために使用するのと同じ構文で複数のDataTableを初期化することができ、このfiddle

を見てみることをお勧め：

var json = { 
    "Policies": [{ 
    "name": "A", 
    "id": "1", 
    "score": "0" 
    }], 
    "Services": [{ 
    "name": "B", 
    "id": "2", 
    "score": "0" 
    }] 
} 


var policyTable = $("#policies-table").DataTable({ 
    "data" : (json.Policies), 
    "columns": [ 
     { "data": "name" }, 
     { "data": "id" }, 
     { "data": "score" }] 
}); 

var serviceTable = $("#services-table").DataTable({ 
    "data" :(json.Services), 
    "columns": [ 
     { "data": "name" }, 
     { "data": "id" }, 
     { "data": "score" }] 
});