Angular: draw a table from json map

Question

I try to create a table like Full Tilt Payout Structure. I decided to create the next map:

$scope.payoutStructure = {
    '2-4': {
        1: 100,
        2: 0,
        3: 0,
        4: 0,
        5: 0,
        6: 0,
    },
    '6-7': {
        1: 65,
        2: 35,
        3: 0,
        4: 0,
        5: 0,
        6: 0,
    }
}

and so on...

But I can't figure out how to render it. If i'm not mistaken, at first I have to render headers like that:

<thead>
    <tr>
    <th><strong>Position \ Entries</strong></th>
    <th ng-repeat="key in payoutStructure.keys()">{{key}}</th> //I'm not sure about .keys(), because they are not render in order as I know                            
    </tr>
</thead>

But I can't get how to render tbody. It seems like I have to use an array instead of a map but I want to get value by keys like:

{{payoutStructure[entries]['1']}}

The ng-repeat docs explain syntax for rendering an object

charlietfl
– charlietfl

2016-03-05 21:15:35 +00:00
Commented Mar 5, 2016 at 21:15 — charlietfl
– charlietfl, Commented Mar 5, 2016 at 21:15

DicBrus · Accepted Answer · 2016-03-05 21:55:59Z

1) header you should render like

<tr>
    <th ng-repeat="(key,value) in payoutStructure">{{key}}</th>
</tr>

2) as for tbody - it it rendered by rows (not by columns), so your structure should follow this structure.

It can be smth like this:

    $scope.payoutStructure = ['2-4','6-7','8-9', '10-18', '18-45'];
    $scope.payoutData = [
        [100, 65, 50, 40, 38],
        [0, 35,30,30,25]
    ]

   <table class="table">
        <tr>
        <th ng-repeat="header in payoutStructure">{{header}}</th>
        </tr>
    <tr ng-repeat="row in payoutData">
        <td ng-repeat="value in row track by $index" >{{value}} </td>
    </tr>
    </table>

doroshko · Accepted Answer · 2016-03-05 22:56:33Z

Following will works for your data structure:

<table class="table">
  <thead><tr>
      <th>Finishing Position</th>
      <th ng-repeat="(key, value) in payoutStructure">{{key}}</th>
  </tr></thead>
  <tbody>
    <tr ng-repeat="key in payoutStructure['2-4']">
      <th scope="row">{{$index +1}}</th>
      <td>{{payoutStructure['2-4'][$index+1]}}</td>
      <td>{{payoutStructure['6-7'][$index+1]}}</td>
    </tr>
  </tbody>
</table>

But better one if you change data structure as following:

(function(angular) {
  'use strict';
  angular.module('ngRepeat', [])
    .controller('repeatController', function($scope) {
      $scope.payouts = {
        '2-4': [100],
        '6-7': [65, 35],
        '8-5': [50, 30, 20],
        '10-18': [40, 30, 20, 10],
        '18-45': [38, 25, 16, 10, 6, 5]
      };

      $scope.maxArray = [];

      angular.forEach($scope.payouts, function(value, key) {
        if (value.length > $scope.maxArray.length)
          $scope.maxArray = value;
      });

    });
})(window.angular);

Here is $scope.maxArray where we write payout with max data array length. And now you can output it with ng-repeat:

<table class="table">
  <thead><tr>
      <th>Finishing Position</th>
      <th ng-repeat="(key, value) in payouts">
        {{key}}
      </th>
  </tr></thead>
  <tbody>
    <tr ng-repeat="key in maxArray track by $index">
      <th scope="row">{{$index + 1}}</th>
      <td ng-repeat="payout in payouts">
        {{payout[$parent.$index]}}
      </td>
    </tr>
  </tbody>
</table>

Result on plunker: http://plnkr.co/edit/n5BfCtqjUKJ7LxvtxIFp?p=preview

And official API docs for ngRepeat directive: https://docs.angularjs.org/api/ng/directive/ngRepeat

Collectives™ on Stack Overflow

Angular: draw a table from json map

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related