Unable to send data from service to controller in angularjs

Question

In my small shopping angular app, i tried to send details of products that i added to cart and then i want to show details of products to another controller. I used service but when i debug it return empty array. I have two controllers: productlistcontroller.js:

    app.controller("productListCtrl", function ($scope, $filter, productListActiveClass, productListPageCount, productListService) {
$scope.addProductToCart = function (product) {
            $scope.cartArr = addProduct(product.ProductId, product.name, product.price);
            productListService.save($scope.cartArr);
        }
})

checkoutcontroller.js:

app.controller("cartSummaryController", function ($scope, productListService) {
    $scope.cartData = productListService.getCartdata();
});

service.js

app.service("productListService", function ()
{
    var cartArray = [];
    this.save = function (cartArray) {
        this.cartArray = cartArray;
    }
    this.getCartdata = function () {
        return cartArray;
    }
})

I cannot get cartArray in service . Thanks for your help.

use this.cartArray = []; instead of var cartArray = []; in service — Shaybi
– Shaybi, Commented Dec 19, 2016 at 10:51

Aviad · Accepted Answer · 2016-12-19 11:01:32Z

1

The problem is that you call to getCartdata method only once the controller is loaded and not when the data is changed. Instead, pass a pointer to the service function to your controller

Replace:

$scope.cartData = productListService.getCartdata();

In:

$scope.cartData = productListService.getCartdata;

And in your view you can do something like:

<div ng-repeat="item in cartData()">{{item}}</div>

This way you will get updated data.

answered Dec 19, 2016 at 11:01

Aviad

5312 silver badges5 bronze badges

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

Comments

Tobi · Accepted Answer · 2016-12-20 07:58:32Z

1

In addition to the issue Satpal described there is an other issue in the Code: you are asking for 'productListService.getCartdata()' at the creation of the cartSummaryController. But the actual value will be set later (maybe based on user input).

So you either need to add some publishing mechanics to your service, so it notifies others / subscribers of changes to the data. Or you can return an object from .getCartdata(). And when you get the data from save you populate the object you already returned in the past.

EDIT: added slightly modified code to showcase how it could work:

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

app.controller("productListCtrl", function ($scope, productListService) {
  $scope.addProductToCart = function (product) {
    productListService.save($scope.data);
  }
});

app.controller("cartSummaryController", function ($scope, productListService) {
    $scope.container = productListService.getCartdata();
});

app.service("productListService", function ()
{  
    var container = {cartData: []};
    this.save = function (name) {
        container.cartData.push(name);
    };
    
    this.getCartdata = function () {
        return container;
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
  <div ng-controller="productListCtrl">
    Product Controller - type text and click 'addToCart':
    <br/>
    <input type="text" ng-model="data" />
    <input type="button" value="addToCart" ng-click="addProductToCart()">
  </div>
  <div ng-controller="cartSummaryController">
      CartData - updates automatically:
    <ul>
      <li ng-repeat="entry in container.cartData">
        {{entry}}
      </li>
    </ul>
  </div>
</body>

This way you can bind container.cartArray to the html inside your requesting controller, and it will be updated whenever save is called.

edited Dec 20, 2016 at 7:58

answered Dec 19, 2016 at 10:52

Tobi

5244 silver badges7 bronze badges

3 Comments

Jane2 Over a year ago

the first time service was called in productlistcontroller i can get cartArray and then before it move to controller it call again in service so that it run cartArray = [] again , therefore in cartSummaryController it will get empty array of cartArray

Tobi Over a year ago

not sure if you refer to your original code or mine, and i did not really understood what you mean with 'move' to controller and 'call again'. You have two flaws in your code 1. when you save you assign the cartData to this and when you get the data you read the empty cartData from the controllers function scope (not $scope!), and therefore you will allways get an empty array. 2. (not sure if it's a real issue or it is just because you cut out some of the code) your cartSummaryController calls get only once at startup.

Tobi Over a year ago

i modified my example and created a working code example, which is slightly different to your original code (to make it short), but you should get the idea. - Just hit run and you can see that and how it works.

Collectives™ on Stack Overflow

Unable to send data from service to controller in angularjs

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related