0

The first page is where i select the data. When i click the button that runs the function on that page, it then sends the data to a service, and on the second page, that controller pulls the data from the service and displays it.

The problem I am having, is if i go back to the first page, change the value, and click the button that runs the function, the data on the second page displays the first value, and not the updated value.

Service Code:

   app.service('popService', function(){

   var popData = [];

   var addData = function(newObj){
        popData.push(newObj);
    };

   var getData = function(){
    return popData[0];
   };
   return{
    addData: addData,
    getData: getData
};
});

Code for passing data to the service in the first controller:

 $scope.passData = function(){
    $total_value = $(".total").html();
    $scope.someData = $total_value;
    popService.addData($scope.someData);
  };

Code for retrieving data in the second controller:

$scope.totals = popService.getData();

Im still not getting it. Sorry. Let me try to re-explain.

I have lets say, 10 variables that I need to store, on different pages. From what I have understood so far, 1 service that stores all of these variables in an array would be best. (i currently have like 6 services, storing different variables, so i can target them).

My new question is, how do i store multiple variables to 1 var in the service, and then how do i target them with getdata? example:

  app.service('example_service', function(){
  var storedData = [];
  var addData = function(newObj){
  storedData.push(newObj)
  };

  var getData = function(){
  return storedData;
  };

  return {
  addData: addData,
  getData: getData};
  });

.

And for passing data to it:

  $scope.passData = function(){
  $scope.data_1 = 1;
  $scope.data_2 = 2;
  $scope.data_3 = 3;
  popService.addData($scope.data_1);
  popService.addData($scope.data_2);
  popService.addData($scope.data_3);
  };

So lets say I push 3 items, and i want to clear the second. Something like storedData[1].length = 0;?

Apologies if this is cryptic, im trying my best to explain what I need, and where im failing to get it.

And then when i goto grab one of those 3 items in the array:

  $scope.data_1 = popService.getData(); (how do i target a specific item?)
Josh Winters
  • 829
  • 5
  • 12
  • 27

4 Answers4

0

You are returning the [0] index of the array which will obviously return the first object, change it like this in your service

var getData = function(){
    return popData;
};

You can clear it by using,

 var clearData = function(){
        popData = [];
    };
Sajeetharan
  • 216,225
  • 63
  • 350
  • 396
  • But this doesnt answer the question. The above answer is kind of what I am looking for. That services are singletons, so no matter how many times I change the data on page 1, page 2 will never update with a new value, unless i clear the data after i grab it on page 2. – Josh Winters Oct 27 '16 at 09:08
0

In AngularJS services are singletons so they are only ever instantiated once. Therefore the first time you call it and add data to it that data will remain until the entire page is refreshed, so even though you go back and go forward again the data will still be there.

If you want to only see the new data you can clear the data in the service in the addData function or you can display all of the data by returning the entire array rather than just the first element.

e.g. To return the entire array

var getData = function(){
    return popData;
};

e.g. To clear array before adding new data

var addData = function(newObj){
    popData.length = 0;
    popData.push(newObj);
};
Gabriel Sadaka
  • 1,748
  • 1
  • 15
  • 19
  • How would you clear the data in a service? For example, when i add the data in the controller, I would then clear the data afterwards? – Josh Winters Oct 27 '16 at 09:07
  • You are better off clearing the data in the service rather than the controller to keep the business logic out of the controllers. – Gabriel Sadaka Oct 27 '16 at 09:10
  • Please see latest edit with example to clear array before adding new data. There are many ways to do it in JS please see this answer for more examples http://stackoverflow.com/questions/1232040/how-do-i-empty-an-array-in-javascript – Gabriel Sadaka Oct 27 '16 at 09:11
0

When you are moving back to first page, popData will still have the old entries. In order to get the recent add value you can either use:

1. pop(): (if you don't need the old values)

var getData = function(){
  return popData.pop();
};

2. Get last added value: (if you need the old values)

var getData = function(){
  return popData[popData.length-1];
};
MrNobody007
  • 1,827
  • 11
  • 32
0

I think there is a typo in your code unless you have defined $total_value elsewhere, since you have not shared your entire code. Shouldn't it be $scope.total_value or simple var $total_value?

$scope.passData = function(){
  var $total_value = $(".total").html();
  //or $scope.total_value = $(".total").html();
  $scope.someData = $total_value;
  //or $scope.someData = $scope.total_value;
  popService.addData($scope.someData);
 };
sisyphus
  • 452
  • 5
  • 13
  • no, $total_value is a variable that stores the value of $(".total").html(). I suppose i could have just done $scope.someData = $(".total").html(). – Josh Winters Oct 27 '16 at 11:07
  • Yes you could. Can you try and see if that helps with a `console.log($scope.someData)` – sisyphus Oct 27 '16 at 11:15