Nested array ng-repeat not working in AngularJs

Question

I am trying to create a nested loop in a html template with Angular, but the last loop from the array isn't showing up.

What might be the problem?

{{arduinos}}    

    <div class="db-control-panel" ng-repeat="arduino in arduinos">

      {{ arduino }}

      <div ng-repeat="tubeStatus in arduino.status">

        {{tubeStatus}}

        <div ng-repeat="tube in tubeStatus">

           {{tube}}

        </div>
      </div>
    </div>

arduinos

[{"arduinoID":3,"status":{"tubeStatus":[0,2,0,0]}},{"arduinoID":5,"status":{"tubeStatus":[0,0]}}]

arduino

{"arduinoID":3,"status":{"tubeStatus":[0,2,0,0]}}

tubeStatus

[0,2,0,0]

Why is tube not showing up?

Not a good idea to use an associative array in JavaScript with number indexes. Thats the problem. — lin
– lin, Commented Jun 15, 2017 at 12:18

Pengyy · Accepted Answer · 2017-06-15 12:30:35Z

you have duplicate items at tubeStatus array, use track by $index to avoid duplication error.

refer the below code snippet:

angular.module("app", [])
  .controller("myCtrl", function($scope) {
    $scope.arduinos = [{
      "arduinoID": 3,
      "status": {
        "tubeStatus": [0, 2, 0, 0]
      }
    }, {
      "arduinoID": 5,
      "status": {
        "tubeStatus": [0, 0]
      }
    }];
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  {{arduinos}}
  <hr>
  <div class="db-control-panel" ng-repeat="arduino in arduinos">

    {{ arduino }}
    
    <div ng-repeat="tubeStatus in arduino.status">

      {{tubeStatus}}

      <div ng-repeat="tube in tubeStatus track by $index">

        {{tube}}

      </div>
      <hr>
    </div>
  </div>
</div>

Collectives™ on Stack Overflow

Nested array ng-repeat not working in AngularJs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related