title: Creating dynamic tables from JSON data with angular-directives
body: <p>I have the following JSON object:</p>
  
  <pre><code>[{
          "id": 31,
          "name": "Foosie",
          "terms": [{
                  "term": 24,
                  "monthly": 190.09
              },
              {
                  "term": 27,
                  "monthly": 179.6
              },
              {
                  "term": 30,
                  "monthly": 178.78
              },
              {
                  "term": 33,
                  "monthly": 178.06
              },
              {
                  "term": 36,
                  "monthly": 171.11
              },
              {
                  "term": 39,
                  "monthly": 215.36
              }
          ]
      },
      {
          "id": 35,
          "name": "Barrie",
          "terms": [{
                  "term": 24,
                  "monthly": 199.61
              },
              {
                  "term": 27,
                  "monthly": 188.05
              },
              {
                  "term": 30,
                  "monthly": 186.37
              },
              {
                  "term": 33,
                  "monthly": 184.95
              },
              {
                  "term": 36,
                  "monthly": 177.41
              },
              {
                  "term": 39,
                  "monthly": 220.85
              }
          ]
      },
      {
          "id": 23,
          "name": "Boosie",
          "terms": [{
                  "term": 24,
                  "monthly": 290.04
              },
              {
                  "term": 27,
                  "monthly": 287.01
              },
              {
                  "term": 36,
                  "monthly": 257.07
              },
              {
                  "term": 39,
                  "monthly": 245.85
              },
              {
                  "term": 42,
                  "monthly": 241.45
              }
          ]
      }
  ]
  </code></pre>
  
  <p>I am trying to create a table with both vertical and horizontal tables. <code>(Vertical = names [Boosie, Foosie, Barrie], Horizontal = terms [24,27,...]</code></p>
  
  <p>Monthly is a button <code>&lt;button (click)="selectPayment(id, term)"&gt;&lt;/button&gt;</code> which passes the id and term of the selected cell.</p>
  
  <p>jsfiddle for demo: <a href="https://jsfiddle.net/34k8ytrk/" rel="nofollow noreferrer">https://jsfiddle.net/34k8ytrk/</a> 
  [NOTE: this was done with a <code>&lt;table&gt;&lt;/table&gt;</code> for quick demo purposes, your response doesn't have to be a table]</p>
  
  <p>I know that I need to keep track of both name and term, as monthly depends on them, however I am trapped in a  hell and am having trouble figuring it out.
  I understand that I might have to do some manipulation to the data in order to make this work. Any help would be appreciated.</p>