How to pass array from service function to scope in controller (AngularJs)?

Question

I have an angular service shown below :

    .service('shareDataService', function() {
            var myXi = [];
            var myYi = [];

            var addXi = function(newObj) {
                myXi = newObj;
            }

            var addYi = function(newObj) {
                myYi = newObj;
            }

            var getPlot = function() {
                var a = [];

                for (var i = 0; i < myXi.length; i++) {
                    a.push([myXi[i], myYi[i]]);
                }

                return a;
            }

            return {
                addXi: addXi,
                addYi: addYi,
                getPlot: getPlot
            };
    });

And i have angular controller :

    .controller('plotController', function($scope, shareDataService) {
            $scope.getYo = function() {
                    return shareDataService.getPlot();
            };
            $scope.lineChartData = [
                    $scope.getYo()
            ];
    });

I need to send a value from $scope.getYo to $scope.lineChartData (it will be and array). How can I do that? I've tried like that, but if I call $scope.lineChartData in HTML, I get nothing. The data that I need is

UPDATE :

See my complete explanation in http://laravel.io/bin/6LVej . Thanks

roxid · Accepted Answer · 2015-04-22 06:19:05Z

8

As we know factory and services are basically used for sharing the data. But both have different use and meaning. The basic difference is Factory should always return Object and Service should return Function(constructor function in JS). Here is code snippet that may be helpful in your case.

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

app.service('arrayService', function() {
  return function() {
    this.getArray = function() {
      return [1, 2, 3, 4, 5];
    }
  }
})
app.factory('arrayFactory', function() {
  return {
    getArray : function() {
      return [9,8,7,6,5];
    }
  }
})
app.controller('MainCtrl', ['$scope','arrayService','arrayFactory',
  function($scope, arrayService,arrayFactory) {
    var ary = new arrayService();
    $scope.serviceArrayObject = ary.getArray();
     $scope.factoryArrayObject = arrayFactory.getArray()

  }
]);

Here is the plunker for basic difference How we use service and factory

edited Apr 22, 2015 at 6:19

roxid

5034 silver badges15 bronze badges

answered Apr 21, 2015 at 6:32

Bharat Bhushan

2,0972 gold badges23 silver badges34 bronze badges

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

6 Comments

nmfzone Over a year ago

Sorry, i still not get the answer that i expected. I know if service must return function, so i describe the return in the last of my service. But it's not that i expected. See my complete explanation : laravel.io/bin/6LVej

Bharat Bhushan Over a year ago

I agree you know that the service must return the function. but its my suggestion to use this while working with service instead of var. BTW I have update the plunker. Please check and let me know if i am wrong

nmfzone Over a year ago

aaah, very thanks for you help..but now i still get the problem, i think the problem because i retrieve array from ng-model <div ng-repeat="i in getTimes()"><input type="number" ng-model="xi[$index]"></div>. if i write the array directly on addXi(arr[]) (ex addXi([1,2,3,4]), i get the result, but if i retrieve an array from ng-model, i get nothing. The console says "no data specified" :(

nmfzone Over a year ago

have any idea? @Bharat Bhushan

Bharat Bhushan Over a year ago

will you please produce the same case on any fiddle or plunker !

|

samyak bhalerao · Accepted Answer · 2015-04-21 05:37:10Z

2

Try following code

.controller('plotController', function($scope, shareDataService) {

        $scope.lineChartData =shareDataService.getPlot();
});

answered Apr 21, 2015 at 5:37

samyak bhalerao

3072 silver badges10 bronze badges

3 Comments

nmfzone Over a year ago

Yeah, i've tried like that, but i get the same, nothing.Have any idea?

samyak bhalerao Over a year ago

where are you calling addXi() and addYi() function?

nmfzone Over a year ago

in RegresiController .controller('RegresiController', function($scope, shareDataService) { $scope.xi = []; $scope.yi = []; shareDataService.addXi($scope.xi); shareDataService.addYi($scope.yi); });

dfsq · Accepted Answer · 2015-04-21 05:35:31Z

0

Since getYo returns an array, you can simply assign its return value to lineChartData directly:

$scope.lineChartData = $scope.getYo();

answered Apr 21, 2015 at 5:35

dfsq

193k26 gold badges244 silver badges261 bronze badges

3 Comments

nmfzone Over a year ago

Yes, i know that, but first, i need the data to be like this [ [ [2,0], [3,1], [5,4] ] ]; I think if i do like that (if possible), i just get the data like this [ [2,0], [3,1], [5,4] ]; Have any idea?

dfsq Over a year ago

Then it will be [$scope.getYo()].

nmfzone Over a year ago

haha, yapp, i tried like it too, and it's not working. because this code $scope.lineChartData = $scope.getYo();, if i call $scope.lineChartData from HTML, i get nothing. If i assign the $scope.getYo(); to $scope, i get nothing, but if i retun $scope.getYo(); from (example) $scope.getFoo(), i get the array. :(

Ramesh Rajendran · Accepted Answer · 2015-04-21 05:42:47Z

0

this shareDataService.getPlot(); is return the array object, So you can directly call this to $scope.lineChartData. try this

 .controller('plotController', function($scope, shareDataService) {             
            $scope.lineChartData = shareDataService.getPlot();
    });

You don't need write this code

        $scope.getYo = function() {
                return shareDataService.getPlot();
        };

answered Apr 21, 2015 at 5:42

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

1 Comment

nmfzone Over a year ago

Yeah, i've tried like that, but i get the same, nothing. But first, i need the data to be like this [ [ [2,0], [3,1], [5,4] ] ]; I think if i do like that (if possible), i just get the data like that [ [2,0], [3,1], [5,4] ]; Have any idea?

Collectives™ on Stack Overflow

How to pass array from service function to scope in controller (AngularJs)?

4 Answers 4

6 Comments

3 Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

3 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related