jsPDF: new document generated for each entry

Question

I have two dummy time entries that I've brought back from my database to my php page in a console.log :

[{
  "FIRST_NAME": "Kiera",
  "LAST_NAME": "Long",
  "USERNAME": "klong.thehelpers@gmail.com",
  "CLOCK_IN": "2017-08-25 09:19:04",
  "START_LUNCH": "0000-00-00 00:00:00",
  "END_LUNCH": "0000-00-00 00:00:00",
  "CLOCK_OUT": "2017-08-25 09:33:28",
  "TOTAL_HRS": "00:00hr:14min:24s"
}, {
  "FIRST_NAME": "Kiera",
  "LAST_NAME": "Long",
  "USERNAME": "klong.thehelpers@gmail.com",
  "CLOCK_IN": "2017-11-12 10:59:59",
  "START_LUNCH": "0000-00-00 00:00:00",
  "END_LUNCH": "0000-00-00 00:00:00",
  "CLOCK_OUT": "2017-11-12 11:39:13",
  "TOTAL_HRS": "00:00hr:39min:14s"
}]

I am using jspdf and jspdf AutoTable to put these results in table form inside a pdf . Every time, I generate a pdf , a separate pdf document is created for each of the time entries. What I need is to get these two entries to print on one document and be rows in one table.

I'm also trying to get better at writing functions too. Here it is:

$.post('api/hoursprintoff.php', {
  useremail: useremail,
  startdate: startdate,
  enddate: enddate
}, function(data) {
  console.log(data);
  var obj = JSON.parse(data);
  var htmlToInsert = obj.map(function(item) {
    var fname = item.FIRST_NAME;
    var lname = item.LAST_NAME;
    var username = item.USERNAME;
    var startd = item.CLOCK_IN;
    var totals = item.TOTAL_HRS;
    var endd = item.CLOCK_OUT;
    var username = item.USERNAME;


    /*if (startd.length >1 && endd.length > 1) {
        console.log(startd + " " + endd);
        /*$.each(obj, function( key, value ) {
            console.dir( key + ": " + JSON.stringify(value) );
        });
    }*/
    //console.log(username);
    //console.log(startd);
    //console.log(endd);
    //var columns = [{title: "Clock In", dataKey: "CLOCK_IN"}, {title: "Clock Out", dataKey: "CLOCK_OUT"}, {title: "Total Hours", dataKey: "TOTAL_HRS"}];
    //var rows = {data} ;
    //console.log(obj.length);
    //console.log(item);
    /*
    function timesheet(timein, timeout, total) {
            var columns = [{title: "Clock In", dataKey: "CLOCK_IN"}, {title: "Clock Out", dataKey: "CLOCK_OUT"}, {title: "Total Hours", dataKey: "TOTAL_HRS"}];
            $.each(item, function( key, value ) {
                console.log(key, value);
            //var rows = [{'CLOCK_IN': timein, 'CLOCK_OUT': timeout, 'TOTAL_HRS': total}];
            });
            var doc = new jsPDF('p', 'pt');
            //doc.createdCell: function (cell, data) { }
            //doc.autoTable(columns, rows);
            doc.text(20, 20, fname + " " + lname + "'s " + 'Timesheet!');
            doc.text(20, 30, 'Organization Email: ' + username);
            doc.save("Test.pdf");
        }//end of timesheet function
    */

    function timesheet(startd, endd, totals) {
      var doc = new jsPDF('p', 'pt');
      var columns = [{
        title: "Clock In",
        dataKey: "CLOCK_IN"
      }, {
        title: "Clock Out",
        dataKey: "CLOCK_OUT"
      }, {
        title: "Total Hours",
        dataKey: "TOTAL_HRS"
      }];
      var rows = [{
        'CLOCK_IN': startd,
        'CLOCK_OUT': endd,
        'TOTAL_HRS': totals
      }];
      if (item > 1) {
        doc.after(rows);
      }


      //console.log(rows);


      //doc.createdCell: function (cell, data) { }
      doc.autoTable(columns, rows);
      doc.text(20, 20, fname + " " + lname + "'s " + 'Timesheet!');
      //doc.text(20, 30, 'Organization Email: ' + username);
      doc.save("Test.pdf");
    } //end of timesheet function
    timesheet(startd, endd, totals);
  }); //end of object map

}); //end of post

My question is how do I stop jspdf from generating a new document for each time entry?

Answer 1

Your object.map function will loop over each object and therefore call timesheet(startd, endd, totals); for each object. Simply moving it outside of the loop should be enough.