Pdfmake: Content of Array Not being added to body->content section

[dahudson88]

I am trying to utilize pdfmake with a react application.

I have an array:

var data = [];
        this.statdata.map((loan) => {
            data.push([
                { text: loaf.shape },
                { text: loaf.type },
                { text: loaf.size },
                { text: loaf.flavor },
                { text: loaf.pan}
            ])
        });

When I console out I see an array of arrays as expected. The issue is that when I try to use the array in the content/body section like below I get 'Uncaught Malformed table row, a cell is undefined.'

content: [
                {
                    table: {
                        headerRows: 1,
                        widths: ['20%', '15%', '20%', '15%', '30%'],
                        body: [
                            [{ text: 'Shape', bold: true }, { text: 'Type', bold: true }, { text: 'Size', bold: true }, { text: 'Flavor', bold: true }, { text: ' PAN', bold: true }],
                     {data}
                        ]
                    },
                    style: 'table'
                },

            ],

Now if I call out every element in the array like below. All is well and the pdf looks correct.

content: [
                {
                    table: {
                        headerRows: 1,
                        widths: ['20%', '15%', '20%', '15%', '30%'],
                        body: [
                            [{ text: 'Shape', bold: true }, { text: 'Type', bold: true }, { text: 'Size', bold: true }, { text: 'Flavor', bold: true }, { text: ' PAN', bold: true }],
                            data[0],
                            data[1],
                            data[2],
                            data[3],
                            data[4],
                            data[5],
                            data[6],
                            data[7],
                            data[8],
                            data[9],
                            data[10],
                        ]
                    },
                    style: 'table'
                },

            ],

Any idea what I could be doing wrong?

[Wabbala]

Hi,

I think it is in your assignment ... {data} should be data. Otherwise you are wrapping the data variable in as an object.

Try:

````javascript
content: [
{
table: {
headerRows: 1,
widths: ['20%', '15%', '20%', '15%', '30%'],
body: [
[{ text: 'Shape', bold: true }, { text: 'Type', bold: true }, { text: 'Size', bold: true }, { text: 'Flavor', bold: true }, { text: ' PAN', bold: true }],
data
]
},
style: 'table'
},

        ],

````

[liborm85]

Result of your dynamic definition generate something like:

body: [
     [{ text: 'Shape', bold: true }, { text: 'Type', bold: true }, { text: 'Size', bold: true }, { text: 'Flavor', bold: true }, { text: ' PAN', bold: true }],
     { [ data[0], data[1], .... data[10] ] }
]

But it is wrong.

Here's corrected sample:

var data = [];

data.push([{ text: 'Shape', bold: true }, { text: 'Type', bold: true }, { text: 'Size', bold: true }, { text: 'Flavor', bold: true }, { text: ' PAN', bold: true }]);

        this.statdata.map((loan) => {
            data.push([
                { text: loaf.shape },
                { text: loaf.type },
                { text: loaf.size },
                { text: loaf.flavor },
                { text: loaf.pan}
            ])
        });

content: [
                {
                    table: {
                        headerRows: 1,
                        widths: ['20%', '15%', '20%', '15%', '30%'],
                        body: data
                    },
                    style: 'table'
                },

            ],

[dahudson88]

Thanks so much guys. I knew that it was something minor that I was looking at. This worked.

[kathiravan1797]

Thank you so much @liborm85 you saved my day...