jspdf autotableプラグインのネストされたJSONプロパティにアクセス

Question

jsPDFとAutoTableプラグインを使用し始めました。これは、私たちが使用しているものにほぼ完璧です。 1つの質問...

テーブルにマップされているJSON内のネストされたプロパティに、列定義のdataKeyを割り当てることはできますか？

"Primary_Key": "12345", 
"Site_Name": { 
    "Address_Name": "Address 1" 
    }, 
"Default_Screen_Name": "Bob", 
"Full_Name": "Bob Smith" 

は、我々は次の列を使用する場合：：

var columns = [ 
    { title: "ID", dataKey: "Primary_Key" }, 
    { title: "Screen Name", dataKey: "Default_Screen_Name" }, 
    { title: "Full Name", dataKey: "Full_Name" }]; 

すべてが完璧に動作

は、我々はこのようになりますJSON構造を有しています。しかし、我々はまた、次のような何かをしたいと思います：

我々は値を取得するために、ネストされたJSONオブジェクトへのインデックスに Site_Name.Address_Nameを使用している

var columns = [ 
    { title: "ID", dataKey: "Primary_Key" }, 
    { title: "Iterations", dataKey: "Iterations" }, 
    { title: "Screen Name", dataKey: "Default_Screen_Name" }, 
    { title: "Site Name", dataKey: "Site_Name.Address_Name" }]; 

。

これは可能でしょうか？

Answer 1

現時点ではありません。その機能要求hereに従うことができます。あなたのオプションは現在、データを自動化可能なものに渡す前にデータを平坦化するか、フックを使って必要な特定のテキストを抽出します。 （v2.3.2が必要です）コメントで追加の質問に対して

var columns = [ 
 
    {title: "ID", dataKey: "id"}, 
 
    {title: "Name", dataKey: "name"}, 
 
    {title: "Country", dataKey: "address"} 
 
]; 
 
var rows = [ 
 
    {id: 1, name: "Shaw", address: {country: "Tanzania"}}, 
 
    {id: 2, name: "Nelson", address: {country: "Kazakhstan"}}, 
 
    {id: 3, name: "Garcia", address: {country: "Madagascar"}} 
 
]; 
 

 
var doc = jsPDF(); 
 
doc.autoTable(columns, rows, { 
 
    createdCell: function(cell, data) { 
 
     if (data.column.dataKey === 'address') { 
 
      cell.text = cell.raw.country; 
 
     } 
 
    } 
 
}); 
 
doc.save('table.pdf');

<script src="https://unpkg.com/jspdf@1.3.3/dist/jspdf.min.js"></script> 
 
<script src="https://unpkg.com/jspdf-autotable@2.3.1/dist/jspdf.plugin.autotable.js"></script>

更新：それは次のように行うことができます

var columns = [ 
    {title: "Country", dataKey: "address", displayProperty: "country"}, 
    ... 
]; 
var rows = [...]; 

... 

createdCell: function(cell, data) { 
    if (data.column.dataKey === 'address') { 
     var prop = data.column.raw.displayProperty; 
     cell.text = cell.raw[prop]; 
    } 
}