I am new to Angular and am struggling with updating an existing item in my Angular array that has changed externally (not via Angular powered UI).

Here is the use case...My web page is populated via a server side call and I am loading the array into Angular and displaying on a list.

Now, if the data on the server changes and a new record is inserted in the table, my page's JavaScript is notified and it successfully inserts a new records into the Angular array via 'push' (Ref. Programmatically inserting array values in Angular JS).

However, my page is also notified when an existing record is changed (on the server side / not via Angular powered UI). I am drawing a blank about how do I go about updating the correct record in my Angular array? Is there a query / update method that I have missed in the Angular docs?

Here is what my current code looks like...

    //The HTML UI updates to reflect the new data inserts.
    <div ng-repeat="item in items">        
        <p class="priority">{{item.priority_summary}}</p>
        <p class="type">{{item.type}}</p>
    </div>

Here is the Script...

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

    <!-- Define controller -->
    var contrl = app.controller("MainController", function ($scope) {

    $scope.items = [{
        "status": "New",
            "priority_summary": "High"
    }, {
        "status": "New",
            "priority_summary": "High"
    }, {
        "status": "New",
            "priority_summary": "High"
    }, {
        "status": "New",
            "priority_summary": "High"
    }];

//The insert works fine. The question is how do I do an update if the notification is for an update, and not for insert.

    $scope.addItem = function(item)
    {
     alert("addItem called");
     $scope.items.push(item);
     $scope.item = {};
    }

      $scope.subscribe = function(){
        //Code for connecting to the endpoint...
        alert("event received"); //We receive this alert, so event is received correctly.

        $scope.items.push({
          status: 'New',
          priority_summary: 'H'
        });
        $scope.$apply();

        }

      //calling subscribe on controller initialization...
      $scope.subscribe();

Any suggestions or examples highlighting this would be great. Thanks!

I am new to Angular and am struggling with updating an existing item in my Angular array that has changed externally (not via Angular powered UI).

Here is the use case...My web page is populated via a server side call and I am loading the array into Angular and displaying on a list.

Now, if the data on the server changes and a new record is inserted in the table, my page's JavaScript is notified and it successfully inserts a new records into the Angular array via 'push' (Ref. Programmatically inserting array values in Angular JS).

However, my page is also notified when an existing record is changed (on the server side / not via Angular powered UI). I am drawing a blank about how do I go about updating the correct record in my Angular array? Is there a query / update method that I have missed in the Angular docs?

Here is what my current code looks like...

    //The HTML UI updates to reflect the new data inserts.
    <div ng-repeat="item in items">        
        <p class="priority">{{item.priority_summary}}</p>
        <p class="type">{{item.type}}</p>
    </div>

Here is the Script...

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

    <!-- Define controller -->
    var contrl = app.controller("MainController", function ($scope) {

    $scope.items = [{
        "status": "New",
            "priority_summary": "High"
    }, {
        "status": "New",
            "priority_summary": "High"
    }, {
        "status": "New",
            "priority_summary": "High"
    }, {
        "status": "New",
            "priority_summary": "High"
    }];

//The insert works fine. The question is how do I do an update if the notification is for an update, and not for insert.

    $scope.addItem = function(item)
    {
     alert("addItem called");
     $scope.items.push(item);
     $scope.item = {};
    }

      $scope.subscribe = function(){
        //Code for connecting to the endpoint...
        alert("event received"); //We receive this alert, so event is received correctly.

        $scope.items.push({
          status: 'New',
          priority_summary: 'H'
        });
        $scope.$apply();

        }

      //calling subscribe on controller initialization...
      $scope.subscribe();

Any suggestions or examples highlighting this would be great. Thanks!

• javascript
• arrays
• angularjs

• What is that you are looking for ? You are already receiving notification for change plus you are able to push updated data ? – Gaurav Commented May 27, 2014 at 5:30
• @hasH: I am able to insert new items, but I am not sure how do I update existing items in the array. The typical Angular filter seem to be geared towards UI, while I am trying to make the change in the array's item itself. Does that make sense? – DevIntern Commented May 27, 2014 at 5:32
• can you get the index of data you need to update ? – Gaurav Commented May 27, 2014 at 5:35
• Yes, I should have mentioned that. I do have a unique Id for every record in the JSON that I am receiving. Do I just search through the array as one normally does, or is there an Angular method which makes it easy? – DevIntern Commented May 27, 2014 at 5:37
• I think so you need the just replace the updated data with the correct data in the array...also as of i know this has to be done by you itself as there is nothing as of query/update ...yes it can be done using the uniqueId – Kushal Commented May 27, 2014 at 5:37

3 Answers 3

I am assuming that you can retrieve the index of corresponding data you want to update. So, you can try.

dataList.splice(index, 1);
dataList.splice(index, 0, newItem);

$scope.setActive = function(user) {
  User.get({ id: user._id }, function(user){
      user.active = true;
      user.$update(function(user){
        angular.forEach($scope.users, function(u, i) {
          if (u._id === user._id ) {
            $scope.users[i] = user;
          }
        });
      });
    });
};

Angular view update automatically when its model change so no need to do something extra, just update your model in controller for ex-

$scope.data = ajaxdata // data you received from server

and in your view

<ul>
  <li ng-repeat="item in data">{{item}}</li>
</ul>

for updating your data you should have some unique key-value pair(u_id in this case) like below code example

$scope.items = [{
    "status": "New",
    "priority_summary": "High",
    "u_id" : 1
}, {
    "status": "New",
    "priority_summary": "High",
    "u_id" : 2
}, {
    "status": "New",
    "priority_summary": "High",
    "u_id" : 3
}, {
    "status": "New",
    "priority_summary": "High",
    "u_id" : 4
}];