Map two Collections (Inner Join) using AngularJS HTML - html

Question

I'm having two Collection user and Type. I wish to dispay Email ID which is marked as IsPreffered = TRUE and I need to map the email.Type to Type.ID
{ "user" : [
{
"Name" : "B. Balamanigandan",
"Email": [
{
"Id": "bala#gmail.com",
"IsPreffered": true,
"Type": 1,
},
{
"Id": "mani#gmail.com",
"IsPreffered": false,
"Type": 2,
}
]}
]};
{
"Type": [
{
"ID": 1,
"Name": "Private"
},
{
"ID": 2,
"Name": "Home"
},
{
"ID": 3,
"Name": "Business"
},
]}
HTML Source Code:
<span ng-repeat="email in collection.user[0].Email | filter: {IsPreffered : true} " ng-if="$last"> {{email.Id}}</span>
Here I need to Specify the Type "Private" for the above HTML. How to Map the user[0].Email.Type to Type.ID and fetch the appropriate Type.Name
Kindly filter the condition using HTML Level not in JavaScript Level. Kindly assist me.

Answer 1

I would suggest doing it in code rather than the markup, but if you need this is one way you can map to Type:
<span
ng-repeat="email in collection.user[0].Email| filter: {IsPreffered : true} "
ng-if="$last">
Email : {{email.Id}} ,
<span ng-repeat="typename in typeCollection.Type|filter:{ID : email.Type}">
Type: {{typename.Name}}
</span>
</span>
where typeCollection is :
$scope.typeCollection = {
"Type": [{
"ID": 1,
"Name": "Private"
}, {
"ID": 2,
"Name": "Home"
}, {
"ID": 3,
"Name": "Business"
}, ]
};
Please note that you needed one more ng-repeat in markup because filter works on an array.
EDIT:
You can also do this using ng-init:
<span
ng-repeat="email in collection.user[0].Email| filter: {IsPreffered : true} "
ng-if="$last">
Email : {{email.Id}} ,
<span ng-init="types = (typeCollection.Type|filter:{ID : email.Type})">
Type: {{types[0].Name}}
</span>
</span>

Answer 2

for(var i = 0; i < Type.length ; i++)
{
if(user[0].Email.Type to Type[i].ID)
{
user[0].Email.TypeName = Type[i].ID;
}
};
Html
<span ng-repeat="email in collection.user[0].Email | filter: {IsPreffered : true} " ng-if="$last">{{email.TypeName}} : {{email.Id}}</span>