AngularJS: nested array and view update

Question

I'm having problems updating the view after an Array inside an Array is updated in the $scope.

First i check if the Array member already exists:

$scope.myArray = [];
if(typeof $scope.myArray[someIndex] == 'undefined') {
  $scope.myArray[someIndex] = {
    name: someName,
    data: []
  };
}

Then push to $scope.myArray[someIndex].data:

$scope.myArray[someIndex].data.push(dataContent);

At this point the view does not update.

Of course if i directly push to $scope.myArray it does. Any suggestions?

Edit: Fiddle here

Have you tried calling `$scope.$apply()` afterwards? What happens then? — furier, Jun 18 '14 at 14:45
I did, tried the solution in http://stackoverflow.com/questions/16039076/angular-js-view-doesnt-update-when-nested-scope-array-is-updated, but i get "$digest already in progress error" — TMichel, Jun 18 '14 at 14:50

score 1 · Accepted Answer · edited May 23 '17 at 11:43

1

It was simpler than it looked.

Based on the response here i am setting an associative array which allows set string keys. If you declare your array as =[] you simply cannot set strings as keys.

So i just changed my declaration $scope.myArray=[] to $scope.myArray={} and voilà, it works.

edited May 23 '17 at 11:43

Community

1
1

answered Jun 18 '14 at 15:49

TMichel

4,336
9
44
67

lol, in your example you used `someIndex` which didn't imply it as being a string, If I knew that I could have told you from the start that a plain object works as a dictionary. – furier Jun 18 '14 at 18:10

score 0 · Answer 2 · answered Jun 18 '14 at 15:03

0

Try:

if(typeof $scope.myArray[someIndex] == 'undefined') {
   $scope.$eval(function(){
     $scope.myArray[someIndex] = {
       name: someName,
       data: []
     };
     $scope.myArray[someIndex].data.push(dataContent);
   });       
}

answered Jun 18 '14 at 15:03

Yaron Schwimmer

5,327
5
36
59

Tried but with no luck. – TMichel Jun 18 '14 at 15:12

score 0 · Answer 3 · edited Jun 10 '15 at 19:41

This works:

HTML,

<div ng-app>
    <div ng-controller="NestedCtrl">
        <article ng-repeat="member in myArray">
            {{member.name}}
            <article ng-repeat="next in member.data">
                {{next.nested}}
            </article>
        </article>
    </div>
</div>

Angular JS:

function NestedCtrl($scope) {

    $scope.myArray = [];

    var callMe = function(){
      if(typeof $scope.myArray[0] == 'undefined') {
          $scope.myArray[0] = {
              name: 'Hello',
              data: []
          };
      }

      $scope.myArray[0].data.push({nested : 'yay'});   
    }

    callMe();
}

AngularJS: nested array and view update

3 Answers3