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?

Answer 1

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>

Answer 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;
    });
});

Answer 3

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

Answer 4

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?