title: How to make the json data to convert in the pdf format using typescript
body: <p>i have json data, i need to convert that to pdf format onclick of PDF button in UI.
  I want the pdf format to appear in this template format. I have done few things but i am not getting how to bind the response to the pdf function.
  Here i want 2 scenarios to get matched, here in the <code>"actualExpenses"</code> array i need to display all the values in block and have <code>"expenses"</code> array in each of 
  "actualExpenses" array of objects and i want this <code>"expenses"</code> array of objects to come just above the "actualExpenses" particular objects.</p>
  
  <p>DEMO: <a href="https://stackblitz.com/edit/angular-jdzg6s?file=src%2Fapp%2Fapp.component.ts" rel="nofollow noreferrer">DEMO</a></p>
  
  <p>Template: </p>
  
  <p><a href="https://i.stack.imgur.com/E5lLM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/E5lLM.png" alt="Image"></a></p>
  
  <p>TS:</p>
  
  <pre><code>captureScreen() {
      this.displayTable = true;
      let grossItems = [];
      grossItems.push(this.grossItems);
      console.log(grossItems)
      var doc = new jsPDF();
          var col = [
            "Actual",
            "Based Amount",
            "Fixed %",
            "80% GU ",
            "85% GU",
            "90% GU",
            "95% GU",
            "100% GU"
          ];
          var col1 = [
            "Estimate",
             "Based Amount",
            "Fixed %",
            "80% GU ",
            "85% GU",
            "90% GU",
            "95% GU",
            "100% GU"
          ];
          var rows = [];
          for (let i = 0; i &lt; grossItems[0].actualExpenses.length; i++) {
            var temp = [];
            for (var key in grossItems[0].actualExpenses[i]) {
              temp.push(grossItems.actualExpenses[i][key]);
            }
            rows.push(temp);
            console.log(temp, "temp");
          }
          doc.setFont("Times New Roman");
          doc.setFontSize(10);
          doc.text(20, 10, grossItems.propertyName);
          doc.text(20, 20, "Property Name Goes Here");
          doc.text(20, 30, "Budgeted Year:");
          doc.setTextColor(0, 0, 0);
          doc.text(20, 40, "Actual Occupancy:");
          doc.autoTable(col, rows, {
            theme: "plain",
            startY: 45,
            margin: {
              top: 45
            },
            drawHeaderRow: (head, data) =&gt; {
              data.doc.setLineWidth(0.7);
              data.doc.setDrawColor(0, 0, 0);
              data.doc.line(
                data.cursor.x,
                data.cursor.y,
                data.cursor.x + data.table.width,
                data.cursor.y
              );
              data.doc.line(
                data.cursor.x,
                data.cursor.y + head.height,
                data.cursor.x + data.table.width,
                data.cursor.y + head.height
              );
            }
          });
          doc.autoTable(col1, rows, {
            theme: "plain",
            startY: 100,
            margin: {
              top: 100
            },
  
            drawHeaderRow: (head, data) =&gt; {
              data.doc.setLineWidth(0.7);
              data.doc.setDrawColor(0, 0, 0);
  
              data.doc.line(
                data.cursor.x,
                data.cursor.y,
                data.cursor.x + data.table.width,
                data.cursor.y
              );
  
              data.doc.line(
                data.cursor.x,
                data.cursor.y + head.height,
                data.cursor.x + data.table.width,
                data.cursor.y + head.height
              );
            }
          });
          document
            .getElementById("convertToPdf")
            .setAttribute("src", doc.output("datauri"));
   }
  </code></pre>
  
  <p>Can anyone help me out to bind values and make my pdf appear as in template, i hope layout is fine, now the only issue is to bind values to the template.</p>