Access nested JSON property in jspdf autotable plugin

问题

I have just started using jsPDF and the AutoTable plugin, and it is almost perfect for what we are using it for. One question...

Is it possible to assign a dataKey in the columns definition to a nested property within the JSON that is being mapped to the table?

We have a JSON structure that looks like this:

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

If we use the following columns:

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

Everything works perfectly. However, we would also like to do something like the following:

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" }];

Where we are using Site_Name.Address_Name to index into the nested JSON object to retrieve the value.

Is something like this possible?

回答1:

Not at the moment. You can follow that feature request here. Your options are currently to either flatten the data before passing it to autotable or use the hooks to extract the specific text you want. That can be done like this:

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, {
   didParseCell: function(data) {
       if (data.column.dataKey === 'address') {
           data.cell.text = data.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>

Update for additional question in comments:

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

...

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

来源：https://stackoverflow.com/questions/44133030/access-nested-json-property-in-jspdf-autotable-plugin

标签

jspdf

jspdf-autotable