I have a function who get an array of objects by ajax using $http :

$scope.getArray = function(page) {
    return $http.get(page).then(function(data) {
        return data.data;
    });
};

I use it that way :

$scope.array = $scope.getArray('somepage');

This code works actually and I have the data I want on the view.

However, I want to add some data at the end of this array. I tried

$scope.addToArray = function(newItem) {
    $scope.array.push(newItem);
};

But that didn't work.

Any ideas how to do that ? Thanks.

I have a function who get an array of objects by ajax using $http :

$scope.getArray = function(page) {
    return $http.get(page).then(function(data) {
        return data.data;
    });
};

I use it that way :

$scope.array = $scope.getArray('somepage');

This code works actually and I have the data I want on the view.

However, I want to add some data at the end of this array. I tried

$scope.addToArray = function(newItem) {
    $scope.array.push(newItem);
};

But that didn't work.

Any ideas how to do that ? Thanks.

• javascript
• angularjs

2 Answers 2

It looks like you are mistreating the promise!

If you want to be able to fiddle with the data returned from getArray then you shouldn't assign the promise to your scope variable. Instead, change the way getArray works:

$scope.getArray = function(page) {
    var propertyAccessor = $parse(page);
    return $http.get(page).then(function(data) {
        page.assign($scope, data.data);
    });
};

Now when you call get array, it will load the data data into the data property and you will be able to modify that (once it has run for the first time)

$scope.getArray('somepage');

$scope.addToArray = function(page, newItem) {
   var propertyAccessor = $parse(page);
   propertyAccessor($scope).push(newItem);
}

$scope.addToArray('somepage', 'someValue');

I put a demo of this together here, it has both your original implemnenation (simulated using $q) and my working example.

I chose a different approach to solving this. Not sure if it's better but I'll put it up here anyway.

(function(utility) {
    angular.module('app').

    service('data',['$q', function($q) {
      var deferred = $q.defer();
      var data = ['bla', 'bla'];

      //some async $http stuff being done resulting in deferred.resolve(data)

      utility.add = function(stuff) {
        data.push(stuff);
      };

      return deferred.promise;
    }]).

    service('dataService', [function() {

      return {
        add: function(data) {
          utility.add(data);
      };

  }]);
}({}));

Basically, any controller that are just interested in my array will have data injected while anyone who is potentially interested in adding stuff to my array will have dataService injected. I then create a closure over a utility object which contains an add function that pushes stuff into the array. This works (at least on 1.0.8) as the promise keeps the reference to the original array and the resolved value is actually updated when I change the original.

This way my controller is decoupled pletely from the $http and does not have to concern itself with how data is fetched from the server, it just gets it handed over by declaring it as a dependency, and I have full control over how stuff gets added. My data is also cached since the service is a singleton while the controller is not.