List only one property of object array

Question

I want an Angular list showing all the instances of one object property from an array of objects, and nothing more – for example, only the countries.

$scope.testSites = [
                { "site": "Testsite1", "country": "Country1", "customer": "Customer1"},
                { "site": "Testsite2", "country": "Country2", "customer": "Customer2"}
            ];
$scope.chosenCategory = 1;
$scope.categoryNames = ["site", "country", "customer"];
$scope.aspect = $scope.categoryNames[$scope.chosenCategory];

However, I want to use the above variable 'aspect' for choosing which property to show in the list. Something like {{x.country}}, though it works, is therefore not sufficient. I've tried this, but it returns an empty list:

<table border="1" class="list-group-item list-group-item-success">
            <tr>
                <th>{{aspect | capitalize}}</th> 
            </tr>

            <tr ng-repeat="x in testSites | orderBy:myOrderBy">
                <td>
                    {{x.aspect}}
                </td>

            </tr>
        </table>

Is there something I can do?

Suren Srapyan · Accepted Answer · 2017-11-28 11:19:31Z

6

You can do via {{ x[aspect] }} - [] bracket notation. It evaluates the expressoin and uses the result to find the property.

You can find Demo here

edited Nov 28, 2017 at 11:19

answered Nov 28, 2017 at 9:23

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

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

3 Comments

Suren Srapyan Over a year ago

Thanks for the demo. Can I put it into the answer?

HonningKake Over a year ago

Omg, I can't believe it was that simple! You're the hero, thank you! :)

Suren Srapyan Over a year ago

@Zooly Thanks a lot

Collectives™ on Stack Overflow

List only one property of object array

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related