Angular factory not returning object property

Question

I can return an object, but not the object property. Why? I have tried many things but nothing seems to work. Sorry but I'm new in Angular

app.factory('myData', function() {

  var data = {
    product: ''
  };


  function addItem(value) {
    data.product = value;
  }

  function getList() {
    return data.product;
  }

  return {
    addItem: addItem,
    getList: getList
  };

});

Updated with the controllers functions

function controllerA(myData){

  var scope = this;
  scope.total = 0;

  scope.addMore = function(){
    scope.total++;
    myData.addItem(scope.total);
  }

}

function controllerB(myData){

  var scope = this;
  scope.total = 0;
  scope.total = myData.getList();

}

This looks alright. when you call getList() you get undefined or ''? — Muli Yulzary
– Muli Yulzary, Commented Aug 2, 2016 at 21:50
Could you make a plunkr of this? As muli stated this looks like it should return the object property alright — Erik Svedin
– Erik Svedin, Commented Aug 2, 2016 at 21:50
So, what is the code that "doesn't work", what do you expect it to do, and what does it do instead? — JB Nizet
– JB Nizet, Commented Aug 2, 2016 at 21:52
It may have something to do with the type of the content you pas to the function, try a console.log(typeof value) — gianni
– gianni, Commented Aug 2, 2016 at 21:54
I've updated my post with more details about the controllers. — Abel Abad
– Abel Abad, Commented Aug 2, 2016 at 22:10

JB Nizet · Accepted Answer · 2016-08-02 22:24:13Z

1

The total in controller B is initialized when the controller is instantiated.

The total in controller A is modified when addMore() is called. So if you call addMore() after controller B is instantiated, controller B will always reference the original value ot the total: the empty string:

 t0: controller A is instantiated
 t1: controller B is instantiated. B.total is initialized with the result of myData.getList(), which is the empty string:

   data.product -------\
                       |
                       V
   B.total -------> empty string


 t2: a.addMore() is called. That modifies the service's total, but not the variable in B

  data.product ---> 1


   B.total -------> empty string

If you reference the object itself in the controller, you don't have this problem, because B has a reference to data, and data.product is modified by A.

answered Aug 2, 2016 at 22:24

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

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

2 Comments

Abel Abad Over a year ago

Thank you. I think that is the problem. But what could I do then?

Lex Over a year ago

@cdz Return the object from your service. Returning primitives from services almost always results in this type of situation where the value in your controller will never update.

Dmitry Matrosov · Accepted Answer · 2016-08-02 22:20:58Z

You can read good article:

aticle

  demo.factory(
            "Friend",
            function( trim ) {
                // Define the constructor function.
                function Friend( firstName, lastName ) {
                    this.firstName = trim( firstName || "" );
                    this.lastName = trim( lastName || "" );
                }
                // Define the "instance" methods using the prototype
                // and standard prototypal inheritance.
                Friend.prototype = {
                    getFirstName: function() {
                        return( this.firstName );
                    },
                    getFullName: function() {
                        return( this.firstName + " " + this.lastName );
                    }
                };
                // Define the "class" / "static" methods. These are
                // utility methods on the class itself; they do not
                // have access to the "this" reference.
                Friend.fromFullName = function( fullName ) {
                    var parts = trim( fullName || "" ).split( /\s+/gi );
                    return(
                        new Friend(
                            parts[ 0 ],
                            parts.splice( 0, 1 ) && parts.join( " " )
                        )
                    );
                };
                // Return constructor - this is what defines the actual
                // injectable in the DI framework.
                return( Friend );
            }
        );

Collectives™ on Stack Overflow

Angular factory not returning object property

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related