Infdig Error when trying to reduce/mutate data

Question

In my Angular JS app, I am calling data from a central data location (aptly called globalData), using a service:

data.service.js:

angular.module('core').factory('dataService', function($http) {
  let properties = {
    globalData = {}
  }

  properties.subscribeTo = function(data) {
    return this.globalData[data];
  }

  properties.loadData = function(data) {
    // as per the component in the next section, data = 'myData'
    // I've left out some code here but essentially the string 'myData'
    // references an http url that is passed into the following $http.get
    $http.get('...').then(res => this.globalData[data] = res);
  }

  return properties;
}

Then in a component:

myComp.component.js:

angular.module('myComp').component('myComp', {
  templateUrl: '...',
  controller: function(dataService) {
    this.$onInit = function() {
      this.subscribedData = () => dataService.subscribeTo('myData');
      if (!this.subscribedData()) dataService.loadData('myData');
    }
  }
});

myComp.template.html:

<div ng-repeat="data in $ctrl.subscribedData()">
  {{...}}
</div>

That works fine on its own (I am providing this background code in case as it might be necessary in understanding where I am coming from).

Now say the myData that I get back from the dataService (via the subscribeTo method) looks like this:

myData: [
  {id: '1', personId: '1', date: '2018-05-06', firstName: 'John', lastName: 'Smith', datum: 'age', oldValue: '64', newValue: '65'},
  {id: '2', personId: '1', date: '2018-05-06', firstName: 'John', lastName: 'Smith', datum: 'isRetired', oldValue: 'false', newValue: 'true'},
  {id: '3', personId: '1', date: '2018-05-07', firstName: 'John', lastName: 'Smith', datum: 'job', oldValue: 'banker', newValue: ''},
  {id: '4', personId: '2', date: '2018-05-08', firstName: 'Jane', lastName: 'Smith', datum: 'registeredSocialSecurity', oldValue: 'false', newValue: 'true'}
];

But I want it to look like this:

myData = [
  {id: '2', personId: '1' date: '2018-05-06', firstName: 'John', lastName: 'Smith', data: [{datum: 'age', oldValue: '64', newValue: '65'}, {datum: 'isRetired' ,oldValue: 'false', newValue: 'true'}]},
  {id: '3', personId: '1', date: '2018-05-07', firstName: 'John', lastName: 'Smith', data: [{datum: 'isRetired', oldValue: 'false', newValue: 'true'}]},
  {id: '4', personId: '2', date: '2018-05-08', firstName: 'Jane', lastName: 'Smith', data: [{datum: 'registeredSocialSecurity', oldValue: 'false', newValue: 'true'}]},
];

So I add the following function to my component:

myComp.component.js:

angular.module('myComp').component('myComp', {
  templateUrl: '...',
  controller: function(dataService) {
    this.$onInit = function() {
      this.subscribedData = () => dataService.subscribeTo('myData');
      if (!this.subscribedData()) dataService.loadData('myData');

      // New function here:
      this.alteredData = function() {
        let sub = (this.subscribedData() || []).reduce((obj, n) => {
          let key = n.personId + '_' + n.date;
          obj[key] = obj[key] || {};
          obj[key].data = obj[key].data || {};

          obj[key].id = n.id;
          obj[key].personId = n.personId;
          obj[key].date = n.date;
          obj[key].firstName = n.firstName;
          obj[key].lastName = n.lastName;

          obj[key].data[n.datum] = {
            datum: n.datum,
            oldValue: n.oldValue,
            newValue: n.newValue
          };
          return obj;
        }, {});

        for (let x in sub) {
          sub[x].data = Object.values(sub[x].data);
        }

        return Object.values(sub);
      }
    }
  }
});

However in trying to use $ctrl.alteredData() on the template is giving me an infdig error.

Any ideas?

Answer 1

I found a solution, which is to preprocess the data and then assign it to a different storage location, then send that out.

properties.subscribeTo = function(data) {
    // _preProcessors is a function which handles the preprocessing, just to keep it "DRY"
    this.globalData[data + 'preP'] = this.globalData._preProcessors[data](this.globalData[data]);
    return this.globalData[data + 'preP'];
}

However I am still trying to find a way to accomplish what I am trying to do that doesn't require me setting the new data in another location. So if anyone knows how to do this, please do answer.