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
– furier, Commented Jun 18, 2014 at 14:45
I did, tried the solution in stackoverflow.com/questions/16039076/…, but i get "$digest already in progress error" — TMichel
– TMichel, Commented Jun 18, 2014 at 14:50

Community · Accepted Answer · 2017-05-23 11:43:42Z

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, 2017 at 11:43

CommunityBot

11 silver badge

answered Jun 18, 2014 at 15:49

TMichel

4,49211 gold badges47 silver badges69 bronze badges

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

1 Comment

furier Over a year ago

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.

Yaron Schwimmer · Accepted Answer · 2014-06-18 15:03:09Z

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, 2014 at 15:03

Yaron Schwimmer

5,3675 gold badges40 silver badges60 bronze badges

1 Comment

TMichel Over a year ago

Tried but with no luck.

falsarella · Accepted Answer · 2015-06-10 19:41:51Z

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();
}

Collectives™ on Stack Overflow

AngularJS: nested array and view update

3 Answers 3

1 Comment

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Linked

Related