javascriptjqueryangularjsangularjs-ng-repeatjquery-mobile-collapsible

Comparing objects between 2 nested arrays in Angularjs and display respective matching data


I'm having two arrays : first one is empdata holding empid and events attended by that employee, then second array is holding event details.

I need to compare empid from array with user input and display particular event details attended by respective employee using collapsible jQuery. Find 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!


Solution

  • You can use custom filter for this.

    Custom Filter Docs

    see the below exmaple

    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>