Angularjs - Merging data between parent and child scope - Timesheet project

Question

I am reworking my code to angular for a timesheet project that ive done with javascript/jquery logic. I am trying to take advantage of the angular functions to get everything working smoothly but I am very confused on how to get this working on a ng-repeat table.

What I have is 2 seperate data sets where I hold the timesheet data (child data) and then the main data (Parent data). The child data contains the ID of the parent and I link them that way and then figure out a logic to merge the data to the appropriate row.

Here is a working table using javasript/jquery: https://jsfiddle.net/tj6bcjos/11/

<table class="table" id="my_table">
  <thead>
    <tr>
      <td>ID</td>
      <td>Description</td>
      <td>Start</td>      
      <td>End</td>      
      <td>Hours</td>
      <td>Day or Night?</td>      
    </tr>
  </thead>
  <tbody></tbody>
</table>

.

$.mockjax({
    url: "Ajax/Path1",
    contentType: "application/json;odata=verbose",
    responseText: {
        d: {
            results: [{
                ID: "17",
                description: "Description 1"
            }, {
                ID: "22",
                description: "Description 2"
            }, {
                ID: "34",
                description: "Description 3"
            }, {
                ID: "54",
                description: "Description 4"
            }]
        }
    }
});


$.mockjax({
    url: "Ajax/Path2",
    contentType: "application/json;odata=verbose",
    responseText: {
        d: {
            results: [{
                ID_of_parent: "17",
                Day_or_night: "day",
                Start: "2016-06-01 08:00",
                End: "2016-06-01 10:00",
                Hours: "2"
            }, {
                ID_of_parent: "17",
                Day_or_night: "day",
                Start: "2016-06-01 13:00",
                End: "2016-06-01 14:00",
                Hours: "1"
            }, {
                ID_of_parent: "17",
                Day_or_night: "night",
                Start: "2016-06-01 21:00",
                End: "2016-06-01 22:00",
                Hours: "1"
            }, {
                ID_of_parent: "22",
                Day_or_night: "day",
                Start: "2016-06-01 09:00",
                End: "2016-06-01 10:00",
                Hours: "1"
            }, {
                ID_of_parent: "22",
                Day_or_night: "day",
                Start: "2016-06-01 14:00",
                End: "2016-06-01 15:00",
                Hours: "1"
            }, {
                ID_of_parent: "54",
                Day_or_night: "day",
                Start: "2016-06-01 13:30",
                End: "2016-06-01 16:00",
                Hours: "2.5"
            }]
        }
    }
});

  data_array = {};
    data1=null
  data2=null//1 is parent, 2 is child

  $.ajax({
    url:"Ajax/Path1",           
    dataType: "json",
    cache: false,
    success: function (data) {
            data1 = data
         if(data1!=null && data2 !=null)
     {
        processData();  
     }

    }//sucess end
  });

  $.ajax({
    url:"Ajax/Path2",           
    dataType: "json",
    cache: false,
    success: function (data) {
            data2 = data;
         if(data1!=null && data2 !=null)
     {
        processData();  
     }

    }
  });
  //can only process if both data1 and 2 are available
  function processData()
  {
      $(data1.d.results).each(function(i,p){ //loop thru parents
            pId = p.ID;
          //bring back the match children
                    children = data2.d.results.filter(function(d){

            return d.ID_of_parent == pId
          })
        s=[]
        e=[]
        h=[] 
        n=[] //start, end  hours...  
       $(children).each(function(i,c)
      {
                    s.push(c.Start);
          e.push(c.End);
          h.push(c.Hours);
          n.push(c.Day_or_night);

      })
         rw = '<tr><td>'+p.ID+'</td><td>'+p.description+'</td><td>'+
          s.join('<br>')+'</td><td>'+e.join('<br>')+'</td><td>'+h.join('<br>')
          +'</td><td>'+n.join('<br>')+'</td></tr>'
      console.log(rw)

        $('#my_table tbody').append(rw);


        })
  }

For the life of me I can't figure out how the logic should be in a ng-repeat this complex. Would anyone know an easy method to accomplish the same task?

Answer 1

I've updated your plunker to use Angular. I hope you will agree that this is much easier and way more readable in Angular vs jquery/js.

https://jsfiddle.net/tj6bcjos/13/

The markup:

<table class="table" id="my_table">
  <thead>
    <tr>
      <td>ID</td>
      <td>Description</td>
      <td>Start</td>      
      <td>End</td>      
      <td>Hours</td>
      <td>Day or Night?</td>      
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="entry in mergedSet">
      <td>{{entry.id}}</td>
      <td>{{entry.description}}</td>
      <td>
        <ul>
          <li ng-repeat="start in entry.start track by $index">{{start}}</li>
        </ul>
      </td>
       <td>
        <ul>
          <li ng-repeat="end in entry.end track by $index">{{end}}</li>
        </ul>
      </td>
      <td>
        <ul>
          <li ng-repeat="hour in entry.hours track by $index">{{hour}}</li>
        </ul>
      </td>
      <td>
        <ul>
          <li ng-repeat="don in entry.dayOrNight track by $index">{{don}}</li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>

The script:

(function() {
    'use strict';
    var app = angular.module('DemoApp', []);

    app.controller('DemoCtrl', DemoCtrl);
    DemoCtrl.$inject = ['$scope', 'DemoService'];
    function DemoCtrl($scope, DemoService) {
      var parentSet = [];
      var childSet = [];
      var mergedSet = [];

      DemoService.pathOne()
      .then(function(result) {
        parentSet = result.d.results;
        DemoService.pathTwo()
        .then(function(result) {
          childSet = result.d.results;
          processData();
        });
      });

      function processData() {
        angular.forEach(parentSet, function(parent) {
          var mergeObject = {
            description: "",
            start: [],
            end: [],
            hours: [],
            dayOrNight: []
          };
          var children = childSet.filter(function(child) {
            return child.ID_of_parent == parent.ID;
          });

          angular.forEach(children, function(child) {
            mergeObject.start.push(child.Start);
            mergeObject.end.push(child.End);
            mergeObject.hours.push(child.Hours);
            mergeObject.dayOrNight.push(child.Day_or_night);
          });

        mergeObject.id = parent.ID;
        mergeObject.description = parent.description;
        mergedSet.push(mergeObject);
      });
      $scope.mergedSet = mergedSet;
    }
  }

  app.service('DemoService', DemoService);
  DemoService.$inject = ['$q'];
  function DemoService($q) {
    var DemoService = this;
    DemoService.pathOne = pathOne;
    DemoService.pathTwo = pathTwo;

    function pathOne() {
      var deferred = $q.defer();
      deferred.resolve({
        d: {
            results: [{
                ID: "17",
                description: "Description 1"
            }, {
                ID: "22",
                description: "Description 2"
            }, {
                ID: "34",
                description: "Description 3"
            }, {
                ID: "54",
                description: "Description 4"
            }]
        }
      });
      return deferred.promise;
    }

    function pathTwo() {
      var deferred = $q.defer();
      deferred.resolve({
         d: {
           results: [{
             ID_of_parent: "17",
             Day_or_night: "day",
             Start: "2016-06-01 08:00",
             End: "2016-06-01 10:00",
             Hours: "2"
           }, {
             ID_of_parent: "17",
             Day_or_night: "day",
             Start: "2016-06-01 13:00",
             End: "2016-06-01 14:00",
             Hours: "1"
           }, {
             ID_of_parent: "17",
             Day_or_night: "night",
             Start: "2016-06-01 21:00",
             End: "2016-06-01 22:00",
             Hours: "1"
           }, {
             ID_of_parent: "22",
             Day_or_night: "day",
             Start: "2016-06-01 09:00",
             End: "2016-06-01 10:00",
             Hours: "1"
           }, {
             ID_of_parent: "22",
             Day_or_night: "day",
             Start: "2016-06-01 14:00",
             End: "2016-06-01 15:00",
             Hours: "1"
           }, {
             ID_of_parent: "54",
             Day_or_night: "day",
             Start: "2016-06-01 13:30",
             End: "2016-06-01 16:00",
             Hours: "2.5"
           }]
         }
      });
      return deferred.promise;
    }
  }

})();

Answer 2

This could be written this way.

First write a template that uses ng-repeat and renders the table over the variable say timesheet

Now declare timesheet to be an empty array in your controller . Like $scope.timesheet = []

Next in the processData function instead of forming the rw and appending , push it to the a temporary variable and finally assign it to $scope.timesheet . If the UI is bound to the timesheet variable properly then, data would be displayed automatically.