Issue with filtering data using array in Angularjs

Question

I apologies if I did any mistake here I am new to AngularJs and Stackoverflow.

I am having a table with 2 different filters first filter works by api calling accepts payload - fromDate and toDate to filter data based on the dates provided by the user from frontend.

Second filter is 2 buttons which is used to filter data for showing myData and allData . From the JSON response I am matching the email of response object and current loggedIn person's email, to identify myData . allData is the entire response.

Issue that I am facing is when I filter my data using API by passing from and to date, my allData filtering logic is not working properly.

code-

 <div class="card-body">
  <div id="buttonsDiv" class="mb-2">
  <button ng-disabled="currentFilterDeal==='ALL'" class="btn btn-primary mr-2" ng-click="filterTable('ALL')">All Data</button>
  <button ng-disabled="currentFilterDeal==='MY'" class="btn btn-primary mr-2" ng-click="filterTable('MY')">My Data</button>
  </div>
  <table style="width: 100%;" id="dataTable" class="table table-hover table-striped table-bordered">
  <tbody>
  <tr ng-repeat="data in finalData  track by $index">
   <td class="text-center">{{data.id}}</td>
   <td class="text-center">{{data.email}}</td>
   <td class="text-center">{{data.address}}</td>
   <td class="text-center">{{data.phoneNumber}}</td>
  </tr>
  </tbody>
  </table>
 </div>  

AngularJs-

   var app = angular.module('myApp', []);
    app.controller('formCtrl', function($scope,$window) {
  $scope.allData=[];

 $scope.getInitialData = function() {
            let dataInit= {
                "fromDate":null,
                "toDate": null
            }
            var settings = {
                "url": "//BackendUrl",
                "method": "POST",
                "headers": {
                    "Authorization": "Bearer Token",
                    "Content-Type": "application/json"
                },
                "data": JSON.stringify(dataInit),
            };
            $.ajax(settings).done(function (response) {
                $scope.allData = response.allData;
                $scope.data = [];
                //to get myData
                $scope.allData.forEach(function (element) {
                    if(element.data != null){
                        if (element.data.email== $scope.loggedInUser) {
                            $scope.data.push(element)
                        }
                        $scope.currentFilterDeal = "MY";
                    }
                })
                $scope.finalData = $scope.data;
                $scope.$apply();

                var table = $('#dataTable').DataTable({});
                table.order( [ 0, 'desc' ] ).draw();
                var requestedType ="<?=$allCallbacks;?>";

                if(requestedType === "true"){
                    $scope.filterTable('ALL');
                    $scope.$apply();
                }
            }).fail(function(err){
                console.log(err);
            });
        }
   $scope.getInitialData();

   $scope.getFilteredData = function (data2){
            let data = Object.assign({},data2)
            var setting = {
                "url": "BackendUrl/Filter",
                "method": "POST",
                "headers": {
                    "Authorization": "Bearer Token",
                    "Content-Type": "application/json"
                },
                "data": JSON.stringify(data)
            };

            $.ajax(setting).done(function (response) {
                $scope.allData = response.allData;
                $scope.data = [];
                $scope.allData.forEach(function (element) {
                    if(element.data != null){
                        if (element.data.email== $scope.loggedInUser) {
                            $scope.data.push(element)
                        }
                        $scope.currentFilterDeal = "MY";
                    }
                })
                $scope.finalData = $scope.data;
                $scope.$apply();
            }).fail(function(data){
                toastr["error"]("We could not filter your contacts.", "Contacts list not loaded!");
                $('#filterButton').attr('disabled',false).html('Filter');
            });
            $('#filterButton').attr('disabled',false).html('Filter');

        }

  $scope.filterTable = (deal) => {
            $scope.currentFilterDeal = deal;
            if(deal==='ALL') {
                $('#dataTable').DataTable().destroy();
                $scope.finalData = $scope.allData;
                console.log("all numbers list ->", $scope.fnalData); //getting correct numbers after filtering
                $('#dataTable').ready(function () {
                    var table = $('#dataTable').DataTable({});
                    table.order( [ 0, 'desc' ] ).draw();
                })
            }else if(deal==='MY'){
                $scope.data = [];
                $scope.allData.forEach(function (element) {
                    if(element.data != null){
                        if (element.data.email=== $scope.loggedInUser){
                            $scope.data.push(element)
                        }
                        $scope.currentFilterDeal = "MY";
                    }
                })
                $('#dataTable').DataTable().destroy();
                $scope.finalData = $scope.data;
                $('#dataTable').ready(function () {
                    var table = $('#dataTable').DataTable();
                    table.order( [ 0, 'desc' ] ).draw();
                })
            }
            else{}
        }
});

Issue - I am struggling with the logic of showing myData and allData after filtering. My current code works perfectly fine until I filter data using API and got new JSON response with more json objects, my allData filter doesn't work there and shows all data from initial response only.

For Example - Initially I got 3 objects as response in an array on which 2 responses are myData and 1 is not myData so I am showing it in allData . When I filter by giving from date and to date I got 10 objects in response . This time if 5 is myData I can see that in the table it works fine. But If I want to see allData by clicking on All Data button I got to see only 3 data there which was the response I've got initially.

Answer 1

You can use filter for filtering the response objects. You can make a function that receives the data and filter criteria. If you need all data then simply return the object and filter when there is a criteria. Hope this helps