AngularJS - Using variable name in JSON selector

Question

I have a table using angularjs where I want to loop through an array to print specific headers from a json object. The header prints out fine, but the problem comes when I try to use a variable from my nested ng-repeat as a json selector. If you replace the inner ng-repeat with the commented section below it, it will work.

Table:

<table>
    <thead>
        <th ng-repeat="column in tableHeader">{{column}}&nbsp;<a ng-click="sort_by(column);"><i class="glyphicon glyphicon-sort"></i></a></th>
    </thead>
    <tbody>
        <tr ng-repeat="data in filtered>
            <td ng-repeat="column2 in tableHeader">{{data.column2}}</td>
<!-- <td>{{data.Environment}}</td>
    <td>{{data.HostIP}}</td>
    <td>{{data.ServiceName}}</td>
    <td>{{data.Status}}</td>
    <td>{{data.StartTime}}</td>
    <td>{{data.Capacity}}</td>
    <td>{{data.Txn}}</td>
    <td>{{data.Errors}}</td>
    <td>{{data.Build}}</td>
    <td>{{data.Project}}</td>
    <td>{{data.Author}}</td>
    <td>{{data.ModifyDate}}</td>
    <td>{{data.Port}}</td>
    <td>{{data.BasePath}}</td> -->
        </tr>
    </tbody>
</table>

Array located in controller:

$scope.tableHeader = ['Environment', 'HostIP', 'Status', 'ServiceName', 'StartTime', 'Capacity', 'Txn', 'Errors', 'Build', 'Project', 'Author', 'ModifyDate', 'Port', 'BasePath'];

Dave · Accepted Answer · 2015-04-09 00:24:37Z

2

I think you're looking for {{data[column2]}}. Since column2 is just the string value of the property you want, treat data like an associative array in this case to get the property you're trying to display.

answered Apr 9, 2015 at 0:24

Dave

9457 silver badges25 bronze badges

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

1 Comment

KJ Price Over a year ago

This will do it, I think.

KJ Price · Accepted Answer · 2015-04-09 00:21:37Z

0

column2 was created by the ng-repeat and is what you want. Note {{column2}}:

<td ng-repeat="column2 in tableHeader">{{column2}}</td>

answered Apr 9, 2015 at 0:21

KJ Price

6,0143 gold badges23 silver badges36 bronze badges

1 Comment

charlietfl Over a year ago

would output all the headings, not what OP is expecting. Note the nested ng-repeat of td inside repeating tr

Collectives™ on Stack Overflow

AngularJS - Using variable name in JSON selector

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related