-2

Can someone please have a look at this code and help to figure out why i keep getting this error. I am new to angularjs (particularly the use of service/factory functions). It was working well when the function and local variable were defined in a controller (instead of a $service) as $scope variables, but because the data returned by this function is required by multiple other controllers , i wanted to reduce code redundancy.

 app.service('SupportService', function()
{
    var locations = []; //local variable to which other elements should be added



 //function to get data and update the local variable (this.locations)

 this.setLocations = function()
    {
        var temp_location = {};

        $.ajax
        ({
            type: 'get',
            url: 'myurl',
            success: function(response)
            {

                for(var i = 0; i < response.length; i++)
                {
                    temp_location =
                    {
                        id: response[i].id,
                        name: response[i].name

                    };
                    locations.push(temp_location);  //this is where the error is
                }
            },
            error: function(response)
            {

            }

        });
    }

an additional function for accessing the locations variable from the service is 

  this.getLocations = function()
    {
        return locations;
    }

The controller that i use to bind the data is as follows

   app.controller('RSVPController', function($scope,SupportService,AuthService)
{

    $scope.init = function()
    {
        SupportService.setLocations();
    }

    $scope.locations = SupportService.getLocations();
});

and in the view i have a call to the init function of this controller and are appending the values to the select as follows 

<select ng-model="location" ng-options="item.name for item in locations track by item.id" required></select>

thank you.

Thabo Ketlhaetse
  • 58
  • 12
  • `this` changes. In event handler `this` refers to the element on which event occurred. In `$.ajax`, `this` becomes the ajax object. – Tushar Aug 18 '16 at 15:18
  • Add `context: this` to your `$.ajax` request. Though are you sure you should be adding properties to `this` in the `app.service` callback? –  Aug 18 '16 at 15:19
  • @squint That won't solve the problem. That way, `this` will refer to the element on which event occurred. – Tushar Aug 18 '16 at 15:20
  • Possible duplicate of [How to access the correct \`this\` / context inside a callback?](http://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-context-inside-a-callback) – Mike Cluck Aug 18 '16 at 15:20
  • @Tushar: Thanks, you're right. I caught that it was in a callback after. –  Aug 18 '16 at 15:21
  • 1
    Use Angulars `$http` module instead of jQuerys AJAX – tymeJV Aug 18 '16 at 15:21

2 Answers2

1

When you use 'this', you have to be careful, because in different scope it might point to different object, you can put location in a closure simply by removing this. service is singleton, it will remember.

Ming Jay
  • 26
  • 2
  • if you need to access location, just add another getter funciton – Ming Jay Aug 18 '16 at 15:31
  • Thanks. it worked after cleaning up my usage "this".. but now i cannot seem to get the value of the select element meant to use this data. The options show up properly on the view but return either 'undefined' or '[object][object]' after selecting a value and submitting the form. here is how the select is defined ' – Thabo Ketlhaetse Aug 18 '16 at 18:53
  • you wanna bind location, try inside of service do var self = this. then use self.location in side of the ajax call, or at success do function(){...}.bind(this) – Ming Jay Aug 18 '16 at 19:30
  • I ll start another comment – Ming Jay Aug 19 '16 at 18:53
0
 app.service('SupportService', function()
{
   this.locations = []; //local variable to which other elements should be added
   var self = this;

    enter code here

 //function to get data and update the local variable (this.locations)

 this.setLocations = function()
    {
        var temp_location = {};

        $.ajax
        ({
            type: 'get',
            url: 'myurl',
            success: function(response)
            {

                for(var i = 0; i < response.length; i++)
                {
                    temp_location =
                    {
                        id: response[i].id,
                        name: response[i].name

                    };
                    self.locations.push(temp_location);  //this is where the error is
                }
            },
            error: function(response)
            {

            }

        });
    }
Ming Jay
  • 26
  • 2