Home:ALL Converter>Create Dynamic Tables with Nested JSON Angular PDFMake

Create Dynamic Tables with Nested JSON Angular PDFMake

Ask Time:2022-09-01T20:49:43         Author:Kenny Cruz

Json Formatter

Good morning, I need help, I'm trying to create a pivot table with a nested array using pdfmake, the problem is that the wind10m property is an array of objects and I would like this to be created.

enter image description here

for each record of the global array that a row is created and that in the wind10m property, the data is printed dynamically according to the number of objects of wind10m.

this is my code:

Array of objects
this.holder =[
        {
          "timepoint": 3,
          "cloudcover": 9,
          "seeing": 7,
          "transparency": 5,
          "lifted_index": 15,
          "rh2m": 12,
          "wind10m":[ {
            "direction": "N",
            "speed": 3
          },
          {
            "direction": "S",
            "speed": 4
          },
           ],
          "temp2m": 16,
          "prec_type": "rain"
        },
        {
          "timepoint": 6,
          "cloudcover": 9,
          "seeing": 7,
          "transparency": 6,
          "lifted_index": 15,
          "rh2m": 12,
          "wind10m": [{
            "direction": "N",
            "speed": 3
          },
          {
            "direction": "S",
            "speed": 4
          },

           ],
          "temp2m": 16,
          "prec_type": "rain"
        },
       
      ]
//my functions

    buildTableBody(data, columns, c2) {
      var body = [];
    
      //push first and second row
      body.push(columns);
      body.push(c2);
      data.forEach(function (row) {
        var dataRow = [];
        columns.forEach(function (column) {
          if (column.text == 'timepoint' || column.text == 'cloudcover') {
            dataRow.push(JSON.stringify(row[column.text]));
          } else if (column.text == 'wind10m') {
            dataRow.push(row['wind10m']['direction']);
          } else {
            dataRow.push(row['wind10m']['speed']);
          }
        });
        body.push(dataRow);
      });
    
      return body;
    }
    
    table(data, columns, c2) {
      return {
        table: {
          headerRows: 3,
          body: this.buildTableBody(data, columns, c2),
        },
      };
    }
    
    generatePdf() {
      console.log('generatePdf');
      let docDefinition = {
        content: [
          { text: 'PDF Generate', style: 'header' },
          this.table(
            this.holder,
            //first row
            [
              { text: 'timepoint', rowSpan: 2 },
              { text: 'cloudcover', rowSpan: 2 },
              { text: 'wind10m', colSpan: 2 },
              '',
            ],
            //second row
            ['', '', { text: 'direction' }, { text: 'Speed' }]
          ),
        ],
      };
      pdfmake.createPdf(docDefinition).open();
    }

my code running on stackblitz

Author:Kenny Cruz,eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/73569623/create-dynamic-tables-with-nested-json-angular-pdfmake
yy