How to draw AngularJs table from Array in Array?

Question

function MyCtrl($scope) {
  $scope.items = [1, 2, 3, [4, 5, 6]];
}

td, th {
  border: 1px solid black;
  width: 60px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="">
  <div ng-controller="MyCtrl">
    <h4>This is what I want to make but Data is [1, 2, 3, [4, 5, 6]]</h4>
    <table>
      <tr>
        <th ng-repeat="item in [1, 2, 3, 4, 5, 6]">head - {{item}}</th>
      <tr>
    </table>
    <h1>This is what I have tried</h1>
    <table>
      <tr>
        <tr ng-repeat="item in items">
          <th ng-show="isNan(item)" ng-repeat="head in item">{{head}}</th>
          <th ng-hide="isNan(item)">{{item}}</th>
        </tr>
      <tr>
    </table>
  </div>
</div>

Please help me if you have any idea for this.

Original logic is like this.

Every user have it's information. Like name, key, password. And also have facilities. And each facilities have its options. type, color and etc.

I would like to show user information in one row.

For that I need to list all information keys in to one line.

[4, 5, 6] is facility and user can have several facilities.

Anyone who got this problem before?

You have a typo in the invocation of isNaN(), should be two capital N's — GMaiolo
– GMaiolo, Commented Nov 1, 2017 at 23:31
You forgot to say how this isn't working. I.e., what problem are you trying to solve? — CJ Dennis
– CJ Dennis, Commented Nov 2, 2017 at 0:02

Richard Morgan · Accepted Answer · 2017-11-01 23:38:50Z

3

Try including a library called LoDash and calling the _.flattenDeep method on your array of items. Then it should work as expected.

function MyCtrl($scope) {
  $scope.items = [1, 2, 3, [4, 5, 6]];
  $scope.items = _.flattenDeep($scope.items);
}

td, th {
  border: 1px solid black;
  width: 60px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<div ng-app="">
  <div ng-controller="MyCtrl">
    <table>
      <tr>
        <th ng-repeat="item in items">head - {{item}}</th>
      <tr>
    </table>
  </div>
</div>

answered Nov 1, 2017 at 23:38

Richard Morgan

7838 silver badges11 bronze badges

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

2 Comments

Fresh Friend Over a year ago

Thanks for your answer, It's working for my example.

Fresh Friend Over a year ago

But one question. If I am trying to use JSON data instead of numbers then it will work like that? e.g Angular provides 2 way data binding, and if I use variables instead of static number then it will update itself? I have tried but not working for 4,5,6. Thanks

Collectives™ on Stack Overflow

How to draw AngularJs table from Array in Array?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related