How to display array element by expression

Question

I am using AngularJS and in my controller I have some arrays, for example:

$scope.users[] = {
  id: 0,
  name: "John",
  surname: "Doe"  
};

$scope.cars[] = {
  id: 0,
  userid: 0,
  color: "blue"
};

then in view, I want to display some data, for example:

<div class="...">{{ cars[0].color }}</div>

this working fine. But now, I want to display name of the users, where cars.userid = users.id. I tried something like this:

<div class="...">{{ users.name | filter: {users.id:cars.userid} }}</div>

but it throws an error of course. I am not sure, if I can use filters this way, or if I must write my own function to the controller, which return the right user name, something like:

$scope.showUserName = function(id) {
  for(var i = 0; i < $scope.users.length; i++) {
    if(id == $scope.users[i].id) {
      return $scope.users[i].name;
    }
  }
}

and then in my view:

<div class="...">{{ showUserName(cars.userid) }}</div>

Thank you for explanation.

I think, that is faster then write X separately functions ... bcs I need to merge data between Y arrays :/ — pes502
– pes502, Commented May 27, 2016 at 14:08

Kyle · Accepted Answer · 2016-05-27 14:16:14Z

1

Simple.

First, define your filter like this

app.filter('carUser', function() {  //register the filter
    return function(carId, users) { //first arg = input, subsequent argument = others
        for(var key in users)
            if(users[key].id === carId)
                return users[key].name;
    }
});

HTML

<!-- users come from $scope.users -->
<div>The user of {{ cars[0].name }} is {{ cars[0].userId | carUser:users }}</div>

edited May 27, 2016 at 14:16

answered May 27, 2016 at 14:10

Kyle

5,6077 gold badges38 silver badges48 bronze badges

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

3 Comments

pes502 Over a year ago

it looks good, but how can I define the array in the filter? In your example I see error "users not defined"

Kyle Over a year ago

@pes502 See edit. You just pass users in with carUser:users. Then in your filter implementation, the first argument is always the input. Subsequent arguments are what you pass in: filterName:arg1:arg2:arg3:etc....

pes502 Over a year ago

thank you man, I edited your code a little bit and its working as I expected and this is what I need :) btw your nick is too OP

Collectives™ on Stack Overflow

How to display array element by expression

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