My service is returning the function's text and not an object

Question

I have a service to share an object in my app... I want to post that object to the mongo db but when I call the function that should return the object it gives me the function's text.

The service is here:

angular.module('comhubApp')
  .service('markerService', function () {
  this.markers = [];
    this.newMarker = {  title: '',
        description: '',
        lat: '',
        lon: '',
        user: '',
        created_at: '' };
// This is supposed to return the marker object
    this.newMarker = function  () {
        return this.newMarker;
    };
    this.setTitle = function (title) {
        this.newMarker.title = title;
        console.log('title service set: ' + title);
    };
    this.setDescription = function (description) {
        this.newMarker.description = description;
        console.log('Description service set: ' + description);
    };
    this.setLat = function (lat) {
        this.newMarker.lat = lat;
        console.log('lat service set: ' + lat);
    };
    this.setLon = function (lon) {
        this.newMarker.lon = lon;
        console.log('lon service set: ' + lon);
    };
    this.reset = function () {
        this.newMarker =  { title: '',
            description: '',
            lat: '',
            lon: '',
            user: '',
            created_at: ''};
            }

    this.setMarkers = function (markers) {
        this.markers = markers;
    }
    this.markers = function () {
        return this.markers;
    }
    this.addMarker = function (marker) {
        //todo append marker
    }
});

newMarker returns:

this.newMarker = function  () {
        return this.newMarker;
    };

The Controller using the service is here

$scope.addMarker = function() {
if($scope.newMarker.title === '') {
    console.log('newMarker title is empty');
  return;
}

markerService.setTitle($scope.newMarker.title);
markerService.setDescription($scope.newMarker.description);

console.log(markerService.newMarker());
// $http.post('/api/markers', { name: $scope.newMarker });
// $scope.newMarker = '';
};

$scope new marker is form data.. i tried to put that right into my service with no success. Instead I out the form data into the controller then push it to the service. If there is a better way to do that please let me know.

If this service is bad in any other way let me know I am new to all this and so I followed another answer I saw on here.

score 0 · Answer 1 · answered Jul 08 '15 at 22:09

So, that function is the problem. I was blindly following another example and it was wrong in my case. The solution is to remove that function and access markerService.newMarker directly.

I am still a big enough noob that I am not sure why the call was returning the function as a string. It seems to have something to do with how it is named but it is just a guess.

sharko · Accepted Answer · 2015-07-08T23:00:43.740

You are overriding your object with function. Just give them different names and it should work just fine.

this.newMarker = { ... };
this.getNewMarker = function () { return this.newMarker };

EDIT:

You should also always create new instance from marker. Otherwise you just edit the same object all the time. Here is example I made. Its not best practice but hope you get the point.

angular.module('serviceApp', [])
.factory('Marker', function () {
    function Marker() {
        this.title = '';
        this.descrpition = '';
    }

    // use setters and getters if  you want to make your variable private
    // in this example we are not using these functions
    Marker.prototype.setTitle = function (title) {
        this.title = title;
    };

    Marker.prototype.setDescription = function (description) {
        this.description = description;    
    };

    return Marker;
})
.service('markerService', function (Marker) {
    this.markers = [];
    this.getNewMarker = function () {
        return new Marker();
    }
    this.addMarker = function (marker) {
        this.markers.push(marker);
    }

})
.controller('ServiceCtrl', function ($scope, markerService) {
    $scope.marker = markerService.getNewMarker();
    $scope.addMarker = function () {
        markerService.addMarker($scope.marker);
        $scope.marker = markerService.getNewMarker();
    }
    $scope.markers = markerService.markers;
});

You could also create Marker in controller and use markerService just to store your object.

And working demo: http://jsfiddle.net/3cvc9rrs/

there is also good answer about services and factories: http://stackoverflow.com/a/21900284/2112228 — sharko, Jul 08 '15 at 22:34
I am a bit embarrassed I missed that the function was overriding like that. I wonder why the example I used did that? The reason I used a service was that I get co-ordinates in a map controller that I send to the add marker form to enter data. Thanks to your suggestion I am going to remove the marker array from the service and store it in the map controller for ease of access. — sitrucj, Jul 09 '15 at 02:02

My service is returning the function's text and not an object

newMarker returns:

The Controller using the service is here

2 Answers2