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?

Answer 1

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/lodash@4.17.4/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>