How to create nested tables with AngularJS?

Question

I want to display JSON response data in a table. Schema is not known in advance and JSON can contain at most one nested object. This example shows a table, which displays key-value pairs:

function TestController($scope) {
  $scope.data = {
    a: 42,
    b: "test",
    c: {
      x: -1,
      y: 1
    }
  };

  $scope.getTypeOf = function(obj) {
    return typeof obj;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="" ng-controller="TestController" border="1">
  <tr ng-repeat="(key, value) in data">
    <td>{{key}}</td>
    <td ng-switch on="getTypeOf(value)">
      <div ng-switch-when="object">
        obj: {{value}}
      </div>
      <div ng-switch-default>{{value}}</div>
    </td>
  </tr>
</table>

Now, for the property "c", I want to create a nested table like this:

function TestController($scope) {
  $scope.data = {
    a: 42,
    b: "test",
    c: {
      x: -1,
      y: 1
    }
  };

  $scope.getTypeOf = function(obj) {
    return typeof obj;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="" ng-controller="TestController" border="1">
  <tr ng-repeat="(key, value) in data">
    <td>{{key}}</td>
    <td ng-switch on="getTypeOf(value)">
      <div ng-switch-when="object">
        <tr ng-repeat="(key1, value1) in value">
          <td>{{key1}}</td>
          <td>{{value1}}</td>
        </tr>
      </div>
      <div ng-switch-default>{{value}}</div>
    </td>
  </tr>
</table>

Intuitively this should work, but it throws Error: $compile:ctreq Missing Required Controller in Chrome. How can I achieve correct behaviour?

Hadi · Accepted Answer · 2016-03-14 09:19:15Z

1

try this.

function TestController($scope) {
  $scope.data = {
    a: 42,
    b: "test",
    c: {
      x: -1,
      y: 1
    }
  };

  $scope.getTypeOf = function(obj) {

    return typeof obj;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="" ng-controller="TestController" border="1">
  <tr ng-repeat="(key, value) in data">
    <td>{{key}}</td>
    <td ng-switch on="getTypeOf(value)">
      <table ng-switch-when="object"  border="1">
        <tr ng-repeat="(key1, value1) in value">
          <td >{{key1}}</td>
          <td >{{value1}}</td>
        </tr>
      </table>
      <div ng-switch-default>{{value}}</div>
    </td>
  </tr>
</table>

edited Mar 14, 2016 at 9:19

answered Mar 14, 2016 at 9:14

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

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

1 Comment

Hadi Over a year ago

i update my answer. please if it is correct accept it. thanks

Zamboney · Accepted Answer · 2016-03-14 08:49:09Z

0

the value on ng-switch-when="object" is an object to array. you need to use Object.keys to extract the object keys, and then you can read each one of them and build your key value table

answered Mar 14, 2016 at 8:49

Zamboney

2,00712 silver badges22 bronze badges

1 Comment

Tin Rabzelj Over a year ago

Something like ng-repeat="key1 in Object.keys(value)"? It throws the same error.

Pankaj Parkar · Accepted Answer · 2016-03-14 09:05:10Z

0

The way you defined your controller is wrong.

You need something like

angular.module('app').controller("TestController", ['$scope', 
  function($scope){ 
    // your controller code 
  }
]);

edited Mar 14, 2016 at 9:05

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

answered Mar 14, 2016 at 8:47

dendimiiii

1,6993 gold badges16 silver badges27 bronze badges

1 Comment

Tin Rabzelj Over a year ago

I only simplified it for this question.

Collectives™ on Stack Overflow

How to create nested tables with AngularJS?

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related