title: CSS Grid, ng-repeat and unknown data
body: <p>Here is the problem. The code is receiving data from a web service in a multidimensional array format. The number of rows and columns, and what those columns are called (keys) are also unknown until run-time. I need to display a grid of that data in a table-like structure. We would like to display this data using CSS Grid (no Tables). </p>
  
  <p>For example, let's assume the following data is retrieved from a web service. </p>
  
  <pre><code>                var data = [
                      { id: 1, first: 'John', last: 'Doe' },
                      { id: 2, first: 'Jane', last: 'Davis' },
                      { id: 3, first: 'Steve', last: 'Smith' }
                  ];
                  vm.data = data;
  </code></pre>
  
  <p>Now, I need to display that in a CSS Grid format. First I define the containing DIV which has the 'display: grid' in the style, so that we have a CSS Grid.</p>
  
  <pre><code>&lt;div style="display: grid;"&gt;...&lt;/div&gt;
  </code></pre>
  
  <p>The desired HTML needs to look similar to the following. (Note that the actual order of the DIV's is of no matter to me, just as long as the grid-row and grid-column values are correct).</p>
  
  <pre><code>&lt;div style="display: grid;"&gt;
    &lt;div style="grid-row: 1; grid-column: 1;"&gt;id&lt;/div&gt;
    &lt;div style="grid-row: 1; grid-column: 2;"&gt;first&lt;/div&gt;
    &lt;div style="grid-row: 1; grid-column: 3;"&gt;last&lt;/div&gt;
    &lt;div style="grid-row: 2; grid-column: 1;"&gt;1&lt;/div&gt;
    &lt;div style="grid-row: 2; grid-column: 2;"&gt;John&lt;/div&gt;
    &lt;div style="grid-row: 2; grid-column: 3;"&gt;Doe&lt;/div&gt;
    &lt;div style="grid-row: 3; grid-column: 1;"&gt;2&lt;/div&gt;
    &lt;div style="grid-row: 3; grid-column: 2;"&gt;John&lt;/div&gt;
    &lt;div style="grid-row: 3; grid-column: 3;"&gt;Doe&lt;/div&gt;
    &lt;div style="grid-row: 4; grid-column: 1;"&gt;3&lt;/div&gt;
    &lt;div style="grid-row: 4; grid-column: 2;"&gt;John&lt;/div&gt;
    &lt;div style="grid-row: 4; grid-column: 3;"&gt;Doe&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The website uses AngularJS, so one option is to use ng-repeat in order to generate the HTML. The problem is, ng-repeat is really meant to work with one-dimensional data. We can pull some additional data by using $index (for example) however. </p>
  
  <p>So for example, in order to generate the DIV's to render the column Titles (which in this case, we are just going to use the Key names) I can do this:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div style="display: grid; grid-template-columns: repeat({{ vm.reportHeaders.length }}, 1fr); grid-gap: 10px;"&gt;
      &lt;div ng-repeat="(key, value) in reportingCtrl.data[0]" style="grid-column: {{ $index }}; grid-row: 1;"&gt;{{ key }}
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Code behind:</p>
  
  <pre><code>var reportHeaders = [];
  for (var property in data[0]) {
      if (data[0].hasOwnProperty(property)) {
         reportHeaders.push(property);
      }
  }
  vm.reportHeaders = reportHeaders;
  </code></pre>
  
  <p>So far so good, but now we come to the data, and that's where I'm getting stuck. </p>
  
  <p><strong>In my mind, I need to:</strong></p>
  
  <ol>
  <li>Loop through the data row by row to access the row index</li>
  <li>Loop through the row, column by column, in order to get the correct column index and the data to be displayed</li>
  <li>Generate a DIV tag that renders the correct row/col data in the "grid-column" and "grid-row" style properties, as well as the correct data for the row/col.</li>
  </ol>
  
  <p>I'm not sure how to do this.</p>
  
  <p><strong>Thoughts</strong></p>
  
  <ul>
  <li>I've seen references to ng-repeat-start/end which might be helpful here, but that still doesn't seem to address the lack of knowing how many columns are involved?</li>
  <li>I can add the table heading data to the data table in the code-behind if that makes life any easier?</li>
  <li>Perhaps there is a way to create a Counter in the ng-repeat as opposed to using $index?</li>
  <li>I could generate the HTML in code-behind and then display it or add it to the DOM, but that's not my preferred option. </li>
  <li>I'm open to ideas? Maybe I'm just too close to the trees to see the forest?</li>
  </ul>