title: Angular displaying multiple JSON data sets with directives+ templates
body: <p>I have been working on a web application project for a local charity I work with for for the last few weeks using Node + Angular when ever I can get some spare time and as a learning tool</p>
  
  <p>So far I have got the node side of things working pretty well but I am struggling with some of the angular stuff to display the data.</p>
  
  <p>So the applications purpose is to record the availability of all the volunteers for a given number of days, each Member gets an email to a link which opens a html page where they can submit their availability.
  On a separate html page,I want to display the availability for the entire workforce for the given time period.
  Each day is broken into 8 time periods and saved in json format e.g if someone is available on  Friday from 0000 - 0300 Friday morning it would be saved as Friday.1:"on"  if they were available from Friday 0300-0600 then if would be saved as Friday.2:"on".Only the periods they are available for are currently saved.</p>
  
  <p>So I have the application happily mailing everyone and recording the individual availability schedule from everyone and amalgamating it into one file.
  My struggles start when I try to display the full Team availability on the single page.</p>
  
  <p>I would like a html page to display each crew members availability using colours, if they area available for the slot ,its green, if not then red.</p>
  
  <p>I have attached a mock html sheet I would like it look something like, it has mock data embedded but the data is not exactly as it is currently returned from the server but gives an idea of how I would like it to display</p>
  
  <p>The page makes a number of get calls on loading and is returned chucks of data which I will attach also</p>
  
  <p>The first chunk of data is an array of the day names the availability is being displayed for and the number of time chunks per day - currently always 8 and unlikely to change so I may drop this but each section = 3 hrs starting from 0000-0300. I am also thinking it maybe better to save each as a {"dayName":"Friday", "shedule":[{"0000":"on","0300":"on"},{"0600":"off","0900":"on"}]}etc as opposed to how I am saving it as below, I am open to all suggestions on improvments for this project.</p>
  
  <p>Data set 1 looks like this
  [{"dayName":"Friday","daySections":8},{"dayName":"Saturday","daySections":8},{"dayName":"Sunday","daySections":8}]</p>
  
  <p>The second chunk is the response data from everyone of the team members that have replied(this contains the team members name,if they are senior team members or not(I need this as all senior team members need to be displayed first at the top of the table</p>
  
  <p>Data set 2 looks like this </p>
  
  <p>[{"name":"Peter","isSenior":"true","shedule":[{"Friday.1":"on","Friday.2":"on"},{"Saturday.1":"on","Saturday.2":"on","Saturday.3":"on","Saturday.4":"on"},{"Sunday.1":"on","Sunday.2":"on","Sunday.3":"on","Sunday.4":"on"}]},{"name":"Liam","isSenior":"true","shedule":[{"Friday.1":"on","Friday.2":"on"},{"Saturday.1":"on","Saturday.2":"on","Saturday.3":"on","Saturday.4":"on"},{"Sunday.1":"on","Sunday.2":"on","Sunday.3":"on","Sunday.4":"on"}]},{"name":"Sean","isSenior":"false","shedule":[{"Friday.1":"on","Friday.2":"on"},{"Saturday.1":"on","Saturday.2":"on","Saturday.3":"on","Saturday.4":"on"},{"Sunday.1":"on","Sunday.2":"on","Sunday.3":"on","Sunday.4":"on"}]},{"name":"Paul","isSenior":"false","shedule":[{"Friday.1":"on","Friday.2":"on"},{"Saturday.1":"on","Saturday.2":"on","Saturday.3":"on","Saturday.4":"on"},{"Sunday.1":"on","Sunday.2":"on","Sunday.3":"on","Sunday.4":"on"}]}]</p>
  
  <p>The third chunk is the data for each team member that has yet to reply
  These members need to be included in all red at the bottom of their respective lists(All seniors at the top, All non seniors on the bottom list)</p>
  
  <p>Data set 3 looks like this</p>
  
  <p>[{"name":"Kevin","isSenior":"false"}]</p>
  
  <p>So what I am trying to do is write a directive and using ng-repeats to build out the html for each member...And I am really struggling with it, The node stuff of recording data/saving/sorting /https is grand but this angular (using Angular1.0) has me driven nuts.</p>
  
  <p>I also have tried writing it as a separate controller / directive / html files as opposed to one single file in order to try keep it tidy</p>
  
  <p>The snippet below just has mock data etc inserted to try give it a look of how I would like it to appear</p>
  
  <p>Also attached is an image of the rendered html to give some flavor of what I am trying to achieve</p>
  
  <p><a href="http://i.stack.imgur.com/USH5K.jpg" rel="nofollow">Image of how I am trying to render the data</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  
  &lt;html lang="en"&gt;
      &lt;head&gt;
      
     &lt;script src="https://code.jquery.com/jquery-1.12.0.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"&gt;&lt;/script&gt;
      &lt;!-- Latest compiled and minified CSS --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"&gt;
      &lt;!-- Optional theme --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"&gt;
      &lt;!-- Latest compiled and minified JavaScript --&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"&gt;&lt;/script&gt;
  
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js" &gt;&lt;/script&gt;
  
           &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-touch.js" &gt;&lt;/script&gt;
      
     &lt;meta name="viewport"  content="width=device-width, initial-scale=1"&gt;
  
      
  &lt;script type="text/javascript"&gt;
      var myApp = angular.module('myApp1',["ngTouch"]);
      myApp.controller('controllerMain',function($scope,$http) {
          //TODO get data from server 
          var mockData = '{"allcrews":[{"name":"John","crewId":1,"schedule":[{"fri":0},{"fri":18},{"fri":21},{"sat":3},{"sat":6},{"sat":9},{"sun":18},{"sun":21}]} ,{"name":"Declan","crewId":1,"schedule":[{"fri":18},{"fri":21},{"sat":3},{"sat":6},{"sat":9},{"sun":18},{"sun":21}]}]}';
          
          var parsedObject = JSON.parse(mockData);
          
          $scope.allMember = parsedObject.allcrews;
          $scope.array_1_to_24 = Array.apply(null, {length: 24}).map(Number.call, Number);
          $scope.colorMatrix = getColorMatrixFromData ($scope.allMember);
          setNotOcuppy( $scope.colorMatrix );
  
          
         function getColorMatrixFromData (members)
         {
             colorMatrix = {};
             console.log(members)
             
             for (var i =0; i &lt; members.length;i++){
                 var schedule = members[i].schedule;
  
                 var oneMember  = Array.apply(null, {length: 24}).map(function () {return "white"});
                 colorMatrix[members[i].name ] = oneMember;
                 for (var j =0; j&lt;schedule.length ;j++)
                 {
                     if (schedule[j].hasOwnProperty('fri')) 
                     {
                         oneMember[Math.floor(schedule[j]['fri']/3)]='red';
                     }
                     if (schedule[j].hasOwnProperty('sat'))
                     {
                          oneMember[8+Math.floor(schedule[j]['sat']/3)]='red';
                     }
                     if (schedule[j].hasOwnProperty('sun'))
                     {
                          oneMember[16+Math.floor(schedule[j]['sun']/3)]='red';
                     }
                 }
                 console.log(oneMember);
             }
             console.log(colorMatrix);
             return colorMatrix; 
         }
         
         function setNotOcuppy (colorMatrix)
         {
             var names = Object.keys(colorMatrix);
             
             for (var i=0;i&lt;24;i++)
             {
                  var isEmpty =true;
                  for (var j =0;j&lt; names.length ;j++)  
                  {
                         if (colorMatrix[names[j]][i] !== "white")
                         {
                             isEmpty=false;
                             break;
                         }     
                          
                  }
                  if(isEmpty === true )
                  {   
                      for (var j =0;j&lt; names.length ;j++)  
                      {
                        colorMatrix[names[j]][i] ="yellow";
                      }
  
                  }
             }
             console.log(colorMatrix);
         }
  
      });
  
  &lt;/script&gt;
  
  
      &lt;/head&gt;
      
  &lt;body ng-app="myApp1"  ng-controller="controllerMain"&gt;
      &lt;h2&gt;Hello Your Name Here  &lt;/h2&gt;
      
          
      &lt;div class="container-fluid" &gt; 
          
      &lt;table class="table table-bordered"&gt;
          &lt;tr&gt;
           &lt;td &gt;&lt;/td&gt;
           &lt;td ng-repeat="n in array_1_to_24"&gt;&lt;font size="1"&gt;{{(n%8)*3}}:00-{{(n%8)*3+3}}:00&lt;/font&gt;&lt;/td&gt;
           
       &lt;/tr&gt;
  
       &lt;tr&gt;
           &lt;td &gt;Name&lt;/td&gt;
           &lt;td colspan="8"&gt;Friday&lt;/td&gt;
           &lt;td colspan="8"&gt;Saturday&lt;/td&gt;
           &lt;td colspan="8"&gt;Sunday&lt;/td&gt;
           
       &lt;/tr&gt;
      &lt;tr ng-repeat="member in allMember"&gt;
      &lt;td &gt;{{member.name}}&lt;/td&gt;
      &lt;td ng-repeat="k in colorMatrix[member.name] track by $index"  style="background:{{k}}"&gt;&lt;/td&gt;        
      &lt;/tr&gt;    
      &lt;/table&gt;
  
  
   &lt;/div&gt;
  
  &lt;/body&gt;
      
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>