Compare two lists in angularJs

Question

I have two list that creat from two different json object:

<ul ng-repeat="a in user.data">
    <li>
        <md-checkbox>
              {{ a.name }}
         </md-checkbox>
    </li>
</ul>

and :

<ul ng-repeat="x in job.data">
    <li>
        <md-checkbox>
              {{ x.user.name }}
         </md-checkbox>
    </li>
</ul>

I have to compare two lists and remove {{ a.name }} that the same as {{ job.user.name }} . Comparing json objects that have different structure is hard. How can I compare this two list and remove repeated items?

By remove you mean filtered? Right? Modifying your original collection will involve code that is not relevant to angular itself but to plain javascript. — devconcept
– devconcept, Commented Mar 23, 2016 at 16:41

devconcept · Accepted Answer · 2016-03-23 18:05:23Z

You can use the filter filter ;) using a function instead of a string in the expression argument. Remember this is the syntax of filter

{{ filter_expression | filter : expression : comparator}}

The expression can be a string, an object or a function. Something like this will do

$scope.filterUnemployed = function(value) {
    var jobs = $scope.job.data;
    for (var i = 0; i < jobs.length; i++) {
        // Search every object in the job.data array for a match. 
        // If found return false to remove this object from the results
        if (jobs[i].user.name === value.name) {
            return false;
        }
    }
    // Otherwise return true to include it
    return true;
}

And then apply the filter to your ng-repeat directive like this

<ul ng-repeat="a in user.data | filter:filterUnemployed">
    <li>
        <md-checkbox>
            {{ a.name }}
        </md-checkbox>
    </li>
</ul>

Note that this will not modify your original collection but will result in a new copy beign displayed in your html since this is usually the desired effect.

Check the sample for a working demo

angular.module('app', [])
  .controller('SampleCtrl', function($scope) {
    $scope.user = {
      data: [{
        name: 'John'
      }, {
        name: 'Mary'
      }, {
        name: 'Peter'
      }, {
        name: 'Jack'
      }, {
        name: 'Richard'
      }, {
        name: 'Elizabeth'
      }]
    };
    $scope.job = {
      data: [{
        jobTitle: 'CEO',
        user: {
          name: 'John'
        }
      }, {
        jobTitle: 'CFO',
        user: {
          name: 'Mary'
        }
      }, {
        jobTitle: 'Analist',
        user: {
          name: 'Jack'
        }
      }]
    };
    $scope.filterUnemployed = function(value) {
      var jobs = $scope.job.data;
      for (var i = 0; i < jobs.length; i++) {
        if (jobs[i].user.name === value.name) {
          return false;
        }
      }
      return true;
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="SampleCtrl">
  <h1>All Users</h1>
  <ul ng-repeat="a in user.data">
    <li>
      <md-checkbox>
        {{ a.name }}
      </md-checkbox>
    </li>
  </ul>
  <h1>Unemployed users</h1>
  <ul ng-repeat="a in user.data | filter:filterUnemployed">
    <li>
      <md-checkbox>
        {{ a.name }}
      </md-checkbox>
    </li>
  </ul>
  <h1>Employed</h1>
  <ul ng-repeat="x in job.data">
    <li>
      <md-checkbox>
        {{ x.user.name }}
      </md-checkbox>
    </li>
  </ul>
</div>

Komo · Accepted Answer · 2016-03-23 21:59:51Z

2

You can create a new array made from filtering one of your arrays :

var newArray = job.data.filter(function(jobData) {
    return user.data.some(function(userData) {
         return userData.name === jobData.user.name;
    });
});

edited Mar 23, 2016 at 21:59

answered Mar 23, 2016 at 16:45

Komo

2,1381 gold badge23 silver badges36 bronze badges

Comments

Arizona2014 · Accepted Answer · 2016-03-23 17:04:38Z

1

Something like this should help :

for(i=0; i<user.data.length;i++){
    for(j=0; j<job.data.length;j++){
        if(user.data[i].name === job.data[j].name){
            user.date.splice(i,1);
        }
    }
}

I would appreciate some feedback, at least to know that my code helped you

edited Mar 23, 2016 at 17:04

answered Mar 23, 2016 at 16:32

Arizona2014

1,3472 gold badges18 silver badges33 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:02:31Z

1

You can use vanilla javascript, jQuery or library undescore.

Please check related links:

How can I merge two complex JSON objects with only unique or different values only showing in resultant array

How to merge two object values by keys

How to merge two arrays of JSON objects - removing duplicates and preserving order in Javascript/jQuery?

Merging two json objects in Java script?

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Mar 23, 2016 at 17:44

Darex1991

9151 gold badge10 silver badges27 bronze badges

Collectives™ on Stack Overflow

Compare two lists in angularJs

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related