CODEWITHSUNDEEP
angularjspdfjspdf-autotable
user3291914
user3291914

Reputation: 39

How to display nested JSON in jspdf angular8

My requirement to download date in PDF format. Except nested JSON remaining elements are populated in PDF. Nested JSON displayed as {Object Object}. I tried lot of solutions suggested in internet haven't found solution.

Can anyone give me the suggestion.

jspdf, angular8

The columns which are displayed in PDF

 var columns = [
            {title: "ID", dataKey: "id"},
            {title: "Name", dataKey: "name"}, 
            {title: "Country", dataKey: "address"}
        ];

The content which is displayed in PDF, columns and rows are mapped using dataKey. Id and Name both are single elements in JsonArray but the address field is a nested JsonObject. I am trying to access the address.country but it is not displaying.

        var rows = [
            {id: 1, name: "chakri", address: {country: "Tanzania"}},
            {id: 2, name: "hari", address: {country: "Kazakhstan"}},
            {id: 3, name: "venki", address: {country: "Madagascar"}}
        ];

id, name values are populated but address is nested JSON country files is not populating in pdf instead in place of country it is showing [object Object]

    exportPdf() {
                import("jspdf").then(jsPDF => {
                    import("jspdf-autotable").then(x => {
                        const doc = new jsPDF.default(0,0);
                        doc.autoTable(this.columns, this.rows);
                        doc.save('primengTable.pdf');
                    })
                })
            }

Upvotes: 1

Views: 1642

Answers (2)

Ron Jonk
Ron Jonk

Reputation: 899

I have created an example in this post. for short: a parent cell must be cleared and the height set during didParseCell and the new table must be added as extra content during didDrawCell

Upvotes: 0

Biotox
Biotox

Reputation: 1601

I did some more research and using Access nested JSON property in jspdf autotable plugin as a guide, I came up with a solution that gets the country property.

JSFiddle to see it work: https://jsfiddle.net/mu4v06dh/1/

var columns = [
    {title: "ID", dataKey: "id"},
    {title: "Name", dataKey: "name"}, 
    {title: "Country", dataKey: "address", displayProperty: "country"}
];
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({
	body: rows,
  columns: columns,
  didParseCell: function(data) {
   if (data.column.raw.displayProperty) {
   		var prop = data.column.raw.displayProperty;
      var text = data.cell.raw[prop];
      if (text && text.length > 0) {
      	data.cell.text = text;
      }
   }
}
});
doc.save('table.pdf');
<script src="https://unpkg.com/[email protected]/dist/jspdf.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/jspdf.plugin.autotable.js"></script>

Upvotes: 2

Related Questions