How can I iterate over a dataset while only extracting properties specified in an array?

Question

I'm working on a project in Angular. I found this question, but it's not quite what I need.

I make an API call and get a JSON object back that has twenty plus properties. So a user might have the following properties and then some:

user.Name
user.Nickname
user.DOB
user.FavoriteColor
user.Address
...

I also have an array that looks like this.

$scope.ThePropertiesIWantToShow = [
                { propertyID: 1, displayValue: 'Name' },
                { propertyID: 3 displayValue: 'DOB' },
                { propertyID: 5 displayValue: 'Address' },

I have a table where I'd like to show this data, but I only want certain properties displayed (the ones in the array above). If I wanted to manually show everything in ThePropertiesIWantToShow, I might do something like this:

<tr ng-repeat="user in users">
    <td>{{user.Name}}</td>
    <td>{{user.DOB}{</td>
    <td>{{user.Address}{</td>
</tr>

However, both the JSON data and ThePropertiesIWantToShow array are much larger. I'd like to know how to use ng-repeat to do something like the following pseudocode, so that I don't have to type out each property manually. Plus, if I needed to make changes, I could just change the array, and it would be reflected in multiple places:

for each user in users
     for each property in ThePropertiesIWantToShow
          <td>user.property</td>

Per the previously linked question, I know that I can do something like this to get all properties:

<tr ng-repeat="user in users">
    <td ng-repeat="(property, value) in user">{{value}}</td>
</tr>

but this gives me all the data from the API call, and I'd only like to display the properties provided in the array for each user.

You have oversimplified the data sample. This is a guessing game on our end without a better representation of what you are actually working with — charlietfl, Dec 19 '16 at 14:17
Done. Let me know if there's anything else I can do to improve the question. — , Dec 19 '16 at 14:23

score 0 · Accepted Answer · answered Dec 19 '16 at 14:24

0

What you probably want is something like:

$scope.fields =['Name','DOB','Address'];

Then in view you repeat the fields within each row:

<tr ng-repeat="user in users">
    <td ng-repeat="field in fields">{{user[field]}}</td>
</tr>

answered Dec 19 '16 at 14:24

charlietfl

170,828
13
121
150

That's almost exactly what I'm looking for! But is there a way to do that while still maintaining the format of `ThePropertiesIWantToShow`? For example, is there something like this: `{{user[property.displayValue]}}`? – Dec 19 '16 at 14:27
Thanks! I figured it would be something simple; I was just struggling with the syntax. – Dec 19 '16 at 14:30

Mistalis · Answer 2 · 2016-12-19T14:31:43.507

-1

If I understand well, you are trying to do this:

Declare this function in your Angular controller:

$scope.getUserProperty = function(user, property) {
    return user[property];
}

And then use it for getting user properties

<div ng-repeat="user in users">
  <div ng-repeat="p in properties">
      {{getUserProperty(user, p.displayValue)}}
  </div>
</div>

Working demo on JSFiddle

edited Dec 19 '16 at 14:31

answered Dec 19 '16 at 14:10

Mistalis

17,793
13
73
97

How can I iterate over a dataset while only extracting properties specified in an array?

2 Answers2