Filter Embedded Json element from a Collection using AngularJS HTML

Question

I'm having a JSON Collection, I wish to dispay Email ID which is marked as IsPreffered = TRUE using AngularJS HTML without . user.Name

My JSON Collection :

{ "user" : [
    {
        "Name" : "B. Balamanigandan",
        "Email": [
            {
                "Id": "[email protected]",
                "IsPreffered": true
            },
            {
                "Id": "[email protected]",
                "IsPreffered": false
            }
    ]}
]};

HTML Source Code:

<div>
    <h3>Employee Details:</h3>
    <span> {{collection.user.Name}} </span>
    <span> {{collection.user.Email.Id}} </span>
</div>

The Collection user contains only one document. So, I didn't use ng-repeat. user is a Collection not a Document. One more check I need. If more than one email has `IsPreferred == true', then I have the take the last one. Kindly assist me.

Kindly filter the condition using HTML Level not in JavaScript Level. Kindly assist me.

@dfsq The Collection user contains only one document. So, I didn't use ng-repeat. user is a Collection not a Document. Kindly assist me. — user6060080
– user6060080, Commented Jun 19, 2016 at 6:34

gaurav5430 · Accepted Answer · 2016-06-19 07:12:37Z

1

instead of this:

<div>
    <h3>Employee Details:</h3>
    <span> {{collection.user.Name}} </span>
    <span> {{collection.user.Email.Id}} </span>
</div>

you will have to do this:

<div>
    <h3>Employee Details:</h3>
    <span> {{collection.user[0].Name}} </span>

    <span ng-repeat="email in collection.user[0].email| filter: {IsPreffered : 'true'}"> {{email.Id}} </span>
</div>

You have to use array syntax, because although there is only 1 user object, it is structured in the json as an array ( note the [ ] , same for Email).

Here is a fiddle: http://jsfiddle.net/Lvc0u55v/5593/

UPDATE: For showing only the last email which is true, use ng-if:

<span ng-repeat="email in collection.user[0].Email| filter: {IsPreffered : true} " ng-if="$last"> {{email.Id}}</span>

Here is the updated fiddle: http://jsfiddle.net/Lvc0u55v/5594/

edited Jun 19, 2016 at 7:12

answered Jun 19, 2016 at 6:47

gaurav5430

14.1k9 gold badges73 silver badges127 bronze badges

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

3 Comments

user6060080 Over a year ago

Thanks but one more check I need. If more than one email has `IsPreferred == true', then I have the take the last one. Kindly assist me please.

gaurav5430 Over a year ago

Please update your question details, to mention this.

user6060080 Over a year ago

I need one more solution from you. I posted a new question stackoverflow.com/questions/37905191/… Kindly assist me.

OzW · Accepted Answer · 2016-06-19 06:55:07Z

One way to do this is to use ngRepeat on the user Emails array with a filter to get only those Emails where "IsPreffered": true. The filter compares each object in the Emails array with the filter object (filterEmail). This filter object is defined in the controller - this way you will be able to change by demand or even set it dynamically.

var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
  $scope.collection = {
    "user": {
      "Name": "B. Balamanigandan",
      "Email": [{
        "Id": "[email protected]",
        "IsPreffered": true
      }, {
        "Id": "[email protected]",
        "IsPreffered": false
      }]
    }
  };

  $scope.filterEmail = {
    "IsPreffered": true
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<body ng-app="app" ng-controller="ctrl">
  <div>
    <h3>Employee Details:</h3>
    <span> {{collection.user.Name}} </span>
    <span ng-repeat="email in collection.user.Email | filter : filterEmail "> 
      {{email.Id}} 
    </span>
  </div>
</body>

NOTE: To my understanding it doesn't make much sense to have user as an array inside an object (in my example I removed the inner array). If you insist on keeping this data-schema, you will need to change every reference of collection.user to collection.user[0].

Collectives™ on Stack Overflow

Filter Embedded Json element from a Collection using AngularJS HTML

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related