Search code examples
angularjspdfmake

Create PDFMake table cells from angularjs .forEach loop over array


The code below renders the following PDF: Link to PDF on Google Docs. (I was not allowed to paste a picture into this post)

There are song titles and chord progressions for each song. What I am looking for is to have a single row for each song/chords cells. In the example I hard coded one last song in the code to show what it should render like. Each song should have its own table row. I have been at it for hours and can't figure it out ...hoping it's a simple solution and I'm just missing something pretty obvious.

Thanks for any help.

    //Fired when SET header clicked to generate PDF
    $scope.openPDF = function (SetName, setSongs) {                       
        songTitles = [];
        songChords = [];

        angular.forEach(setSongs, function(value, key) {            
            songTitles.push({ text: value.Title, style: 'tableHeader'});
            songChords.push({ text: value.Chords, style: 'tableHeader'});
        });

        var docDefinition = 
        {       
           pageOrientation: 'landscape',

           content: [
             { text: 'SET 01', style: 'firstLine'},
             { text: SetName, style: 'secondLine' },                 
                {  
                    table: 
                    {
                        headerRows: 0,                            
                        body: 
                        [                       
                          [songTitles, songChords],['American Girl', 'D - E - G - A']
                        ]
                    }
                }
           ],

           styles: {
             firstLine: {
               fontSize: 32,
               bold: true,
               alignment: 'center'
             },
             secondLine: {
               fontSize: 15,
               bold: true,
               alignment: 'center'
             },
           }

        };//End docDefinition

        //Generate PDF
        pdfMake.createPdf(docDefinition).open();

    }; //END Function  

Solution

  • Sorted it out ...posting solution in case it helps someone.

    Link to PDF created using the function below: https://drive.google.com/open?id=0B9COonOvl5koR09aNkRZUHpPczA

    All data is pulled from a MySQL database...so there is a table of songs with various attributes (Title, Artist, main chord structure, etc) - then a table of sets which contain three setlists per set.

        //Fired when SET header clicked to generate PDF
        $scope.openPDF = function (setList, setSongs, setNumber) {                       
            songRows = [];
    
            angular.forEach(setSongs, function(value, key) {            
                songRows.push({Title: value.Title, Chords: value.Chords, WhoStarts: value.WhoStarts});                
            });
    
            var items = songRows.map(function(item) {
             return [(100 + songRows.indexOf(item) + 1).toString().slice(-2) + '.', item.Title, item.Chords, item.WhoStarts];
            });
    
            var docDefinition = 
            {       
               pageOrientation: 'landscape',
    
               content: 
               [
                    { text: setNumber, style: 'firstLine'},
                    { text: setList.EventDate + ' - ' + setList.SetName + ' @ ' + setList.Venue + '\n\n', style: 'secondLine' },                 
                    {  
                        style: 'songRow',
                        table: 
                        {                                                   
                          body: 
                          [
                            [                             
                              { text: '------' },
                              { text: '--------------------------------------' },
                              { text: '--------------------------------------' },
                              { text: '--------------------------------------' },  
                            ]
                          ].concat(items)                         
                        }
                    }
               ],
    
               styles: {
                 firstLine: {
                   fontSize: 32,
                   bold: true,
                   alignment: 'center'
                 },
                 secondLine: {
                   fontSize: 15,
                   bold: true,
                   alignment: 'center'
                 },
                 songRow: {
                   fontSize: 18,
                   bold: true,
                   alignment: 'center',                   
                 },
               }
    
            };//End docDefinition
    
            //Generate PDF
            pdfMake.createPdf(docDefinition).open();
        } //END Generate PDF Function