angularjspdfjspdf-autotable

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');
                    })
                })
            }

Solution

  • 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/jspdf@1.3.3/dist/jspdf.min.js"></script>
    <script src="https://unpkg.com/jspdf-autotable@3.2.11/dist/jspdf.plugin.autotable.js"></script>