Using Getter/Setter Methods in AngularJS Factory

Question

I am running into some major headaches trying to create factories for one of my angular modules. I need to take some JSON data and be able to work with it while still keeping the original format so I can turn it back into a string. so if I have JSON data like:

[ [ '11/09/2012', {gender:'M'}, 'John', 'Smith'], ['07/22/1986', {gender:'M'}, 'Bill', 'Miller], ...]

I want to be able to call data.birthday or data.firstName rather than having to keep track of the structure in my view.

To do that I have a factory that looks like this:

.factory('DataObject', function () {

        DataObject.prototype.objToArray = function()
        {
            var arrayVal = [];

            arrayVal[0] = this.bday;
            arrayVal[1] = this.phys;
            arrayVal[2] = this.fname;
            arrayVal[3] = this.lname;               
            return arrayVal;
        };

        function DataObject(data, valueBuilder) {
            if(data)
            {
                this.bday = data[0];
                this.phys = data[1];
                this.fname = data[2];                   
                this.lname = data[3];
            }
        }
        return (DataObject);
    })

That part works fine. The problem is, I also want to add angular accessor methods to allow me to get/set nested values like gender. something like:

get gender(){ return this.phys.gender; }

I can not figure out how to use that syntax with my factory. The only way It will allow me to use accessor methods is to change

function DataObject(data, valueBuilder) {}
return DataObject;

to

return { get gender(), set gender(val)};

which means I have no way to actually instantiate my factory with the data. I'm sure there must be some way to do this. What am I missing?

Why is your json using arrays? Seems like using objects would simplify things instead of hard coding array indexes. [{ dob: '11/09/2012', gender:'M', name_first: 'John'},{... — Cerad
– Cerad, Commented Mar 19, 2015 at 18:02
It certainly would; most of the data in the application is structured that way. Unfortunately, the data in question is a jcard (see: tools.ietf.org/html/rfc70950). For whatever reason the people who designed that spec decided everything needed to go in arrays. Nasty I know, but it's what I have to work with. — pbuchheit
– pbuchheit, Commented Mar 19, 2015 at 19:24

FDisk · Accepted Answer · 2015-11-28 10:05:45Z

3

Here is an setter and getter example in angular. In setter I'm appending some additional string Mr and in getter :

var myApp = angular.module('myApp', []);

myApp.service('userService', [function () {
    var first_name, last_name;
    this.user = {
        get name() {
            return ':' + first_name;
        },
        set name(val) {
            first_name = 'Mr ' + val;
        }
    };
    return this.user;
}]);

myApp.controller('testCtrl', ['$scope', 'userService', function ($scope, userService) {
    userService.name = 'Been';
    
    $scope.test = userService;
    
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
<h2>Test Controller</h2>
    <div class="wrapper" ng-controller="testCtrl">
        My Name {{test.name}}
    </div>
</div>

answered Nov 28, 2015 at 10:05

FDisk

9,6732 gold badges54 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

imnotthatrobot Over a year ago

But he/she is trying to use Factory, not Service.

Cerad · Accepted Answer · 2015-03-19 20:32:15Z

1

Let me take a shot at it. I broke things up into a Person constructor, a PersonFactory and then a test controller. I left out the toArray stuff but it's easy enough to add. Using a Person constructor lets you use pure javascript without angular getting in the way.

(function(angular)
{
  var Person = function(data)
  {
    item = {
      bday:  data[0],
      phys:  data[1],
      fname: data[2],                   
      lname: data[3],

      get gender() { return this.phys.gender; }
    };
    return item;
  };
  var personModule = angular.module('zaysoApp.personModule', []);

  personModule.factory('personFactory', [ function()
  {
    return { create: function(data) { return new Person(data); }};
  }]);

  personModule.controller('PersonTestController', ['$scope','personFactory',
  function($scope,personFactory) 
  {
    // Pretend we used angular.fromJson() to make these
    var p1 = ['11/09/2012', { gender: 'M' }, 'John', 'Smith'];
    var p2 = ['07/22/1986', { gender: 'M' }, 'Bill', 'Miller'];

    [p1,p2].forEach(function(data)
    {
      person = personFactory.create(data);
      console.log(person.fname + ' ' + person.gender);
    });
  }
]);
})(angular);

Not sure exactly what your looking for but I think this shows how you can make a constructor function and then use it from angular.

answered Mar 19, 2015 at 20:32

Cerad

49k9 gold badges92 silver badges94 bronze badges

2 Comments

pbuchheit Over a year ago

Very nice! As long as that still works with binding in angular (ie I can bind peson.gender to the ng-model of something in the view) this seems like the way to go.

Cerad Over a year ago

You will of course need to add a set gender for two way binding but angular does not care.

Community · Accepted Answer · 2017-05-23 10:27:45Z

0

I'm not sure if this is what you're after? But essentially I'm returning a new instance of an object that you can modify. As factories are singletons, you would need to return an instance of something that you can modify individually.

Here is a fiddle:

https://jsfiddle.net/1bejzxwq/

angular.module('HelloApp', [])
    .factory('DataObjectFactory', [DataObjectFactory])
    .controller('Test', ['$scope', 'DataObjectFactory', Test]);


function Test ($scope, DataObjectFactory) {
    $scope.hi = "hi";

    var data = [ '11/09/2012', {gender:'M'}, 'John', 'Smith'];
    var object = DataObjectFactory.DataObject(data);
    console.log(object.getFirstName());
}

function DataObjectFactory () {

    var service = {
        DataObject: function (data) {
            return new DataObject(data);
        }
    };

    return service;

    function DataObject(data) {
        if(data) {
            this.bday = data[0];
            this.phys = data[1];
            this.fname = data[2];                   
            this.lname = data[3];
        }

        this.getFirstName = function () {
            return this.fname || null;
        }
    }
}

Perhaps look at the example from this answer (Option 2):

Angular.js data accessor

edited May 23, 2017 at 10:27

CommunityBot

11 silver badge

answered Mar 19, 2015 at 18:33

Patrick Wolf

1,31911 silver badges28 bronze badges

3 Comments

pbuchheit Over a year ago

Not really what I'm after but thank you anyway. I specifically want to use the get/set syntax provided by angular, not an explicit function like 'getThing()'

Patrick Wolf Over a year ago

I updated my answer to include another example from another answer

pbuchheit Over a year ago

Still not quite what I want, but that might be a good fall-back if I can't come up with something else.

Collectives™ on Stack Overflow

Using Getter/Setter Methods in AngularJS Factory

3 Answers 3

1 Comment

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related