Map two Collections (Inner Join) using AngularJS 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": "[email protected]",
                "IsPreffered": true,
                "Type": 1,
            },
            {
                "Id": "[email protected]",
                "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.

Kindly filter the condition using HTML Level not in JavaScript Level: that would be thr wrong thing to do. That should be done in JavaScript. The template shouldn't deal with that complexity. A controller is precisely there to contain that kind of logic. Side note: preferred is spelt preferred, not preffered. — JB Nizet
– JB Nizet, Commented Jun 19, 2016 at 8:09
@JBNizet - I agree with you... But in JavaScript the LINQ operation and mapping operation and all very complex I think so, I need a solution in HTML level. So I wish to accomplish this in HTML level filtration. — user6060080
– user6060080, Commented Jun 19, 2016 at 8:15
JavaScript is a programming language. Angular expressions allow doing a tiny subset of what JS can do to generate HTML dynamically. If you find it too hard in JS, then HTML will be even harder. Filtering collections in JavaScript is not hard, even if all you know about it is loops. If you find that so hard to do in JS that you don't even know where to start, then you should practice programming a bit more before doing Angular applications. You have an array, and you need to find a specific element in that array. That shouldn't be too hard. — JB Nizet
– JB Nizet, Commented Jun 19, 2016 at 8:17

gaurav5430 · Accepted Answer · 2016-06-19 08:42:22Z

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>

HaikelO · Accepted Answer · 2016-06-19 08:35:35Z

1

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>

answered Jun 19, 2016 at 8:35

HaikelO

1065 bronze badges

Collectives™ on Stack Overflow

Map two Collections (Inner Join) using AngularJS HTML

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related