Access AngularJS scope object using a different scope object as the key

Question

I am iterating through an array of person objects using ng-repeat Say the array looks like this:

[{
  "display_name": "John Smith",
  "status": "part-time",
  "bio": "I am a person. I do people stuff.",
}, {
  "display_name": "Jane Doe",
  "status": "full-time",
  "bio": "I am yet another person.",
}, ...]

Meanwhile, I have another number_list object that looks like this (note the uppercase):

{
  "JOHN SMITH": 12,
  "JANE DOE": 34,
  ...
}

In the HTML, I am able to interpolate from each person object like so:

<p>
  Person Name: {{ person.display_name }}
  Person Bio: {{ person.bio }}
  ...
</p>

But I'd also like to interpolate from the second object, accessing the value where the key matches the person object I'm on, like so:

<p>
  ...
  Person Number: {{ number_list['{{ person.display_name | uppercase }}'] }}
</p>

I am using the EMCAScript Bracket notation rather than the dot notation to specify the key, because of the spaces in the key names of number_list (eg "JOHN SMITH" ) but I get nothing out of that interpolation.

I have confirmed that if I type in a name eg {{ number_list['JOHN SMITH'] }} that I am able to interpolate the value -- 12 in this example. This means the issue doesn't have to do with scope or anything like that as far as I can tell.

Answer 1

Nested interpolation with double curly braces ( {{ }} ) is not supported by the AngularJS framework. If you want to run more complex code, you should make it a controller method and call the method from your view.

<p ng-repeat="person in persons">
  ...
  ̶P̶e̶r̶s̶o̶n̶ ̶N̶u̶m̶b̶e̶r̶:̶ ̶{̶{̶ ̶n̶u̶m̶b̶e̶r̶_̶l̶i̶s̶t̶[̶'̶{̶{̶ ̶p̶e̶r̶s̶o̶n̶.̶d̶i̶s̶p̶l̶a̶y̶_̶n̶a̶m̶e̶ ̶|̶ ̶u̶p̶p̶e̶r̶c̶a̶s̶e̶ ̶}̶}̶'̶]̶ ̶}̶}̶
  Person Number: {{ ::personNumber(person.display_name) }}
</p>

$scope.personNumber = function(name) {
    return $scope.number_list[name.toUpperCase()];
};

Answer 2

You can also use filter to personNumber for an object:

app.controller("ctrl", function($scope){
   $scope.persons = [...];

   $scope.number_list = [...];
})     

app.filter("personNumber", function(){
    return function(array, name){
      return array[name.toUpperCase()];
    }
})

<p ng-repeat="person in persons">
  ...
  Person Number: {{person.display_name | personNumber: number_list}}
</p>