AngularJS: Display table from 2D Array

Question

I was trying to find a way to display a table from a 2D Array. At the moment I cant get anything to display, a simple bool 1/0 is desired. Any Advice would be appreciated.

    var Matrix = [
        [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1],
        [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1],
        [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1],
        [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1],
        [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1],
        [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1],
        [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1],
        [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1],
        [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1],
        [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1],
        [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1],
        [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1],
        [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1],
        [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1],
        [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1],
        [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1],
        [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1],
        [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1],
        [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1],
        [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1],
        [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1],
        [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1]
];


            <div id = "MatrixTable2">
            <table border="1">
                <tbody  ng-repeat="xxx in Matrix">
                    <tr width="50px">

                        <td width="50px" ng-repeat="yyy in xxx[0]"> bool {{yyy}}</td>
                    </tr>
                </tbody>
            </table>
        </div>

manish · Accepted Answer · 2016-04-15 18:40:12Z

just a track by $index (so that angular can keep track of it) and you are done :-

*.html

<table border="1">
   <tbody  ng-repeat="xxx in Matrix">
        <tr width="50px">
             <td width="50px" ng-repeat="yyy in xxx track by $index">{{yyy}}</td>
        </tr>
   </tbody>
</table>

*.js

$scope.Matrix = [
    [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1],
    [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1],
    [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1],
    [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1],
    [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1],
    [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1],
    [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1],
    [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1],
    [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1],
    [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1],
    [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1],
    [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1],
    [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1],
    [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1],
    [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1],
    [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1],
    [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1],
    [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1],
    [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1],
    [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1],
    [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1],
    [0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,1]
];

Brent Washburne · Accepted Answer · 2016-04-15 18:27:13Z

0

Drop the [0] from xxx[0]:

ng-repeat="yyy in xxx track by $index"

This assumes that Matrix is in $scope.Matrix

edited Apr 15, 2016 at 18:27

answered Apr 15, 2016 at 18:23

Brent Washburne

13.2k4 gold badges65 silver badges86 bronze badges

1 Comment

Brent Washburne Over a year ago

I added the track by $index clause: docs.angularjs.org/api/ng/directive/ngRepeat

Collectives™ on Stack Overflow

AngularJS: Display table from 2D Array

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related