title: Displaying JSON list of dates as a calendar in angular
body: <p>I have a JSON list of the days in a month. </p>
  
  <p>Like so:</p>
  
  <pre><code>{
      date: "2016-08-01T00:00:00",
      weekday: 1,
  },
  {
      date: "2016-08-02T00:00:00",
      weekday: 2,
  },
  ...
  </code></pre>
  
  <p>Where <code>weekday: 1</code> means Monday, <code>weekday: 2</code> is Tuesday. </p>
  
  <p>So, I know how many days are in the month and I know what day the month starts on. </p>
  
  <p>Using Angular to fetch the JSON and then create a view, I want to display the above JSON as a standard calendar, that is in rows of seven days. </p>
  
  <p>As in:</p>
  
  <pre><code>    &lt;table&gt;
          &lt;tr&gt;
              &lt;td&gt;sun&lt;/td&gt;
              &lt;td&gt;mon&lt;/td&gt;
              &lt;td&gt;tue&lt;/td&gt;
              &lt;td&gt;wed&lt;/td&gt;
              &lt;td&gt;thr&lt;/td&gt;
              &lt;td&gt;fri&lt;/td&gt;
              &lt;td&gt;sat&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;day 1&lt;/td&gt;
              &lt;td&gt;day 2&lt;/td&gt;
              &lt;td&gt;day 3&lt;/td&gt;
              &lt;td&gt;day 4&lt;/td&gt;
              &lt;td&gt;day 5&lt;/td&gt;
              &lt;td&gt;day 6&lt;/td&gt;
              &lt;td&gt;day 7&lt;/td&gt;
          &lt;/tr&gt;
          ....
      &lt;/table&gt;
  </code></pre>
  
  <p>Two broad solutions seem likely:</p>
  
  <p>1) Use some really fancy view logic. Lots of <code>ng-repeats</code> and <code>ng-init</code> for counters. This seems difficult and ugly, if it's even possible. </p>
  
  <p>2) Create an array and then use nested <code>ng-repeats</code> to display the data.</p>
  
  <pre><code>var calendar = function(){
      var firstDay = data[0].weekday;
      vm.month = [];
      var week = [];
      for(var i=0; i &lt; data.length; i++){
          var day = data[i];
          if(i===0){
              while(firstDay &gt; 0){
                  week.push(null);
                  firstDay --;
              }
          }
          if(week.length === 7){
              vm.month.push(week);
              week = [];
          }
          week.push(day);
      }
  
      console.log(vm.month);
  }
  </code></pre>
  
  <p>Works great. The calendar array contains week arrays that contain the day information. To display it, all I need are a couple of <code>ng-repeats</code>:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr ng-repeat="week in vm.month"&gt;
          &lt;td ng-repeat="day in week"&gt;
              {{day}}
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Except no. I get the following error:</p>
  
  <pre><code>Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys.
  </code></pre>
  
  <p>I suspect I need turn my array into a JSON object, but I don't know how to do that. </p>
  
  <p>Or maybe there's a way to use the array as-is with the nested <code>ng-repeats</code>?</p>
  
  <p>If there's any other information that would help, please let me know.</p>