jsonファイルのDataTable行をレンダリングする

Question

同じディレクトリに配置されたjsonファイルからDataTable行をレンダリングしようとしています。しかし残念ながら、DataTable-Bodyは空のままであり、コンソールにエラーは表示されません。ここで

は（縮小）HTML-コードです：私は、JSONファイルからデータをロードするために使用しています。ここ

<table id="opTable"> 
    <thead> 
     <tr><th class="partner_id">ID</th><th>ShortName</th><th>DisplayName</th><th>LogoUrl</th><th>Incent</th><th>JTS-URL</th></tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table> 

ではJavaScriptです：

 <script> 
    $(document).ready(function() { 
     $('#onlinePartnerTable').DataTable({ 
      "ajax" : "../test2.json", 
      "columns": [{ 
       "data": "pId" 
      }, { 
       "data": "shrName" 
      }, { 
       "data": "DplayName" 
      }, { 
       "data": "lgo" 
      }, { 
       "data": "inc" 
      }, { 
       "data": "featured" 
      }] 
     }); 
    }); 
    </script> 

、ここではサンプルです私のjsonファイルの内容：

{ 
"partnerList": [ 
     { 
      "shrname": "bchan", 
      "Dplayname": "bchang-Shop", 
      "pId": "id12345", 
      "featured": "0", 
      "lgo": "https://url.here.com/url", 
      "inc": "1 to 1", 
      "dets": { 
       "tmage": "someUrl/here", 
       "desp": "desciption", 
       "jturl": "jtUrl/here", 
       "jtbut": "Shop", 
       "termy": [ 
        { 
         "heady": "", 
         "body": "" 
        } 
       ] 
      } 
     }, 
     { 
      "shrname": "hereIsIt", 
      "Dplayname": "HereIs-Shop", 
      "pId": "id65432", 
      "featured": "0", 
      "lgo": "https://url.here.com/url", 
      "inc": "2 to 1", 
      "dets": { 
       "tmage": "someUrl/here", 
       "desp": "desciption", 
       "jturl": "jtUrl/here", 
       "jtbut": "Shop", 
       "termy": [ 
        { 
         "heady": "", 
         "body": "" 
        } 
       ] 
      } 
     } 
    ] 
} 

私はこのエラーになりました。下記の画像を参照してください。

Answer 1

コメントで提供されたリンクのカブの1、Datatables Ajax Data Source (objects)に基づいて、あなたのデータは次のようになります。この

var t = [{ 
 
    "shrname": "bchan", 
 
    "Dplayname": "bchang-Shop", 
 
    "pId": "id12345", 
 
    "featured": "0", 
 
    "lgo": "https://url.here.com/url", 
 
    "inc": "1 to 1", 
 
    "dets": { 
 
    "tmage": "someUrl/here", 
 
    "desp": "desciption", 
 
    "jturl": "jtUrl/here", 
 
    "jtbut": "Shop", 
 
    "termy": [{ 
 
     "heady": "", 
 
     "body": "" 
 
    }] 
 
    } 
 
}, { 
 
    "shrname": "hereIsIt", 
 
    "Dplayname": "HereIs-Shop", 
 
    "pId": "id65432", 
 
    "featured": "0", 
 
    "lgo": "https://url.here.com/url", 
 
    "inc": "2 to 1", 
 
    "dets": { 
 
    "tmage": "someUrl/here", 
 
    "desp": "desciption", 
 
    "jturl": "jtUrl/here", 
 
    "jtbut": "Shop", 
 
    "termy": [{ 
 
     "heady": "", 
 
     "body": "" 
 
    }] 
 
    } 
 
}]; 
 
$(document).ready(function() { 
 
    $('#opTable').DataTable({ 
 
    "aaData": t, 
 
    "columns": [{ 
 
     "data": "pId" 
 
    }, { 
 
     "data": "shrname" 
 
    }, { 
 
     "data": "Dplayname" 
 
    }, { 
 
     "data": "lgo" 
 
    }, { 
 
     "data": "inc" 
 
    }, { 
 
     "data": "featured" 
 
    }] 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" /> 
 
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script> 
 
<table id="opTable"> 
 
    <thead> 
 
    <tr> 
 
     <th class="partner_id">ID</th> 
 
     <th>ShortName</th> 
 
     <th>DisplayName</th> 
 
     <th>LogoUrl</th> 
 
     <th>Incent</th> 
 
     <th>JTS-URL</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    </tbody> 
 
</table>

Answer 2

を試してみてください。

{ 
    "data": [ 
     { 
      "shrname": "bchan", 
      "Dplayname": "bchang-Shop", 
      "pId": "id12345", 
      "featured": "0", 
      "lgo": "https://url.here.com/url", 
      "inc": "1 to 1",    
     }, 
     { 
      "shrname": "hereIsIt", 
      "Dplayname": "HereIs-Shop", 
      "pId": "id65432", 
      "featured": "0", 
      "lgo": "https://url.here.com/url", 
      "inc": "2 to 1",    
     } 
    ] 
} 

私はあなたのデータの "dets"部分で何をしようとしているのかは分かりません