Angular js table with columns determined by object data

Question

I have a list that contains objects that have variable data:

Object.id = 0;
Object.map1 = [{key, value}, {key,value}, ...]

What I have is the unchanged data(like the ID) which I put as a column and then it's value in the row.

However, all the keys from the map need to be columns as well with the mapped value in the respective row for them, because each request to the service can return different data. So the output should be something like:

ID                   KEY1         KEY2          ...
ID.VALUE             VALUE1       VALUE2        ...
...

I'm new to angular hope this makes sense.

EDIT: What I've been trying for columns:

<thead>
<th ng-repeat="(column,v) in List.Objects[0].map1">
<a href="">{{column}}</a></th>
</th>
</thead>

Will each set have consistent keys for all objects in that set? — charlietfl
– charlietfl, Commented Oct 11, 2016 at 15:01
ok...but on each request will they be consistent like [{name:'xx',age:23}, {name:'yy',age:73}] so each object has same keys across set? — charlietfl
– charlietfl, Commented Oct 11, 2016 at 15:10

Cyril Gandon · Accepted Answer · 2016-10-11 15:30:33Z

I tried my best to understand what you need, and I've come up with this example, I hope it answered your question:

angular.module('MyApp', []).controller('MyCtrl', function($scope) {

  $scope.List = [{
    id: 1,
    map1: [{
      key: 'key1',
      value: '789'
    }, {
      key: 'key2',
      value: '987'
    }]
  }, {
    id: 2,
    map1: [{
      key: 'key1',
      value: 'bbb'
    }, {
      key: 'key2',
      value: 'ddd'
    }]
  }];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<table ng-app='MyApp' ng-controller='MyCtrl'>
  <tr>
    <th>
      id
    </th>
    <th ng-repeat="(column,v) in List[0].map1">
      {{v.key}}
    </th>
  </tr>
  <tr ng-repeat="map in List">
    <td>
      {{map.id}}
    </td>
    <td ng-repeat="(column,v) in map.map1">
      {{v.value}}
    </td>
  </tr>
</table>

charlietfl · Accepted Answer · 2016-10-11 15:38:19Z

0

Given data something like:

$scope.items= [
  {
    "key-1": "Item-1-1",
    "key-2": "Item-1-2",
    "key-3": "Item-1-3",       
  },
  {
    "key-1": "Item-2-1",
    "key-2": "Item-2-2",
    "key-3": "Item-2-3"        
  }
]

You can create an array of the keys from the first item in array using

 $scope.fields= Object.keys($scope.items[0]);

Then use the fields array to repeat over to create the needed table columns

<table class="table">
  <tbody>
    <tr>
      <th ng-repeat="heading in fields">{{heading}}</th>
    </tr>
    <tr ng-repeat="item in items">
      <td ng-repeat="key in fields">
         {{item[key]}}
      </td>
    </tr>
  </tbody>
</table>

DEMO

edited Oct 11, 2016 at 15:38

answered Oct 11, 2016 at 15:25

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Collectives™ on Stack Overflow

Angular js table with columns determined by object data

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related