Comparing objects between 2 nested arrays in Angularjs and displaying matching matching data

Question

I have two arrays: the first is empdata hold empid and the events that this employee is working on, and then the second array contains information about the event.

I need to compare empid with an array with user input and display specific information about the events that the corresponding employee visited using resettable jQuery. Find the total price also.

 $scope.empdata=[]; $scope.data = []; //first array data $scope.empdata.push({ empid:'empid_1', events:[{ event:'First Event' }, { event:'Second Event' } ]}) $scope.empdata.push({ empid:'empid_2', events:[{ event:'First Event' }, { event:'Second Event' }, { event:'Third Event' }] }) //second array data $scope.data.push({ event:'First Event', date: '10-jun-2015', type:[{ name: 'Hotel Booking', price: 400.00 },{ name: 'Flight', price: 400.00 },{ name: 'Honorarium', price: 900.00 }] }) $scope.data.push({ event:'Second Event', date: '27-july-2015', type:[{ name: 'Hotel Booking', price: 530.00 },{ name: 'Train', price: 400.00 },{ name: 'Honorarium', price: 600.00 }] }) $scope.data.push({ event:'Third Event', date: '20-aug-2015', type:[{ name: 'Hotel Booking', price: 910.00 },{ name: 'Flight', price: 500.00 },{ name: 'Honorarium', price: 1500.00 }] }) 

Thanks in advance!

Answer 1

You can use custom filter for this.

Custom filters

see example below

 var app = angular.module('app', []); app.filter('findobj', function() { return function(dataobj, selected) { return dataobj.filter(function(data) { return (selected || []).some(function(s) { return data.event === s.event; }); }); }; }); app.controller('ctrl', function($scope) { $scope.empdata = []; $scope.data = []; $scope.empdata.push({ empid: 'empid_1', events: [{ event: 'First Event' }, { event: 'Second Event' }] }) $scope.empdata.push({ empid: 'empid_2', events: [{ event: 'First Event' }, { event: 'Second Event' }, { event: 'Third Event' }] }) $scope.empdata.push({ empid: 'empid_3', events: [{ event: 'Forth Event' }, { event: 'Fifth Event' }] }) //second array data $scope.data.push({ event: 'First Event', date: '10-jun-2015', type: [{ name: 'Hotel Booking', price: 400.00 }, { name: 'Flight', price: 400.00 }, { name: 'Honorarium', price: 900.00 }] }) $scope.data.push({ event: 'Second Event', date: '27-july-2015', type: [{ name: 'Hotel Booking', price: 530.00 }, { name: 'Train', price: 400.00 }, { name: 'Honorarium', price: 600.00 }] }) $scope.data.push({ event: 'Forth Event', date: '27-july-2015', type: [{ name: 'Hotel Booking', price: 530.00 }, { name: 'Train', price: 400.00 }, { name: 'Honorarium', price: 600.00 }] }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app"> <div ng-controller="ctrl"> <select ng-options="emp.events as emp.empid for emp in empdata" ng-model="selected"></select> <hr/>Selected: {{selected}} <hr/> <div ng-repeat="d in data | findobj:selected ">{{d}}</div> </div> </div>