0

I´m struggling with UI-grid trying to set it up properly.

I have a datastructure similar to this:

var arr = [
        {'name': 'a', age: '1'},
        {'name': 'b', age: '2'},
        {'name': 'c', age: '3'},
        {'name': 'd', age: '4'},
        {'name': 'e', age: '5'}
        ];

Im trying to present the data using name as columnHeader and age as its data. So I would like the result to consist of only two rows.

Here is the code I am using:

$scope.gridOptions = {
        enableSorting: true,
        columnDefs: [],
        data : []
      };

      var arr = [
        {'name': 'a', age: '1'},
        {'name': 'b', age: '2'},
        {'name': 'c', age: '3'},
        {'name': 'd', age: '4'},
        {'name': 'e', age: '5'}
        ];

          for (var i = 0; i < arr.length; i++) {
                var name = arr[i].name.toString();

                $scope.gridOptions.columnDefs.push({ name:name, field: 'age' });

              }


}]);

plunker

eggman
  • 111
  • 1
  • 2
  • 10

1 Answers1

1

try this

  var d = [];          
  var model = {};
  for (var i = 0; i < arr.length; i++) {
      var name = arr[i].name.toString();
      $scope.gridOptions.columnDefs.push({ name:name, field: 'age' });
      var a = $scope.gridOptions.columnDefs[i].name.toString();
      model[a]=arr[i].age; 
  } 
   d.push(model); 
  $scope.gridOptions = { data: d };
Hadi J
  • 16,989
  • 4
  • 36
  • 62
  • Thank you. This give me a result of 2 columns. Name and Age. I would like it to be 5 columns where the headers are: a | b | c | d | e....and on the second row... 1 | 2 | etc.. – eggman Jun 18 '16 at 07:21
  • Perfect! Thank you! – eggman Jun 19 '16 at 08:20