How to Implement Excel Like Filter in angularjs with NULL values?

Question

I am new to AngualarJS and I Need to Implement Excel Like Filter for table using angulajs(v.1) . I searched this site and found out a solution here:
https://stackoverflow.com/a/49655718/9967249

The above solution works fine, But if I have a null or empty value in my list then it doesn't work.

In this case the Search Text Functionality works for the column Status as it has all values populated but since all the other Columns are having null values, the Search Box functionality doesn't work.

Please see the above solution uses data from a variable in the Controller but I am using data from Backend(SpringBoot) and using it as a List.

Please help me out in this situation.

This is the snippet my Controller Class

var usecaseData = UseCaseOverview.get(function (){

        $scope.XLfilters = { list: [], dict: {}, results: [] };

        $scope.markAll = function(field, b) {
              $scope.XLfilters.dict[field].list.forEach(function(x){x.checked=b;});
              /*$scope.XLfilters.dict[field].list.forEach((x)=>{x.checked=b;});*/
            }

        $scope.clearAll = function(field) {
              $scope.XLfilters.dict[field].searchText='';
              $scope.XLfilters.dict[field].list.forEach(function(x){x.checked=true;});
              /*$scope.XLfilters.dict[field].list.forEach((x)=>{x.checked=true;});*/
            }

        $scope.XLfiltrate = function() {
            var i,j,k,selected,blocks,filter,option, data=$scope.XLfilters.all,filters=$scope.XLfilters.list;
            $scope.XLfilters.results=[];
            for (j=0; j<filters.length; j++) {
                filter=filters[j];
                filter.regex = filter.searchText.length?new RegExp(filter.searchText, 'i'):false;
                for(k=0,selected=0;k<filter.list.length;k++){
                    if(!filter.list[k].checked)selected++;
                  filter.list[k].visible=false;
                  filter.list[k].match=filter.regex?filter.list[k].title.match(filter.regex):true;
                }
                filter.isActive=filter.searchText.length>0||selected>0;
            }
            for (i=0; i<data.length; i++) {
                blocks={allows:[],rejects:[],mismatch:false};
                for (j=0; j<filters.length; j++) {
                  filter=filters[j]; option=filter.dict[data[i][filter.field]];
                  (option.checked?blocks.allows:blocks.rejects).push(option);
                  if(filter.regex && !option.match) blocks.mismatch=true;
                }
                if(blocks.rejects.length==1) blocks.rejects[0].visible=true;
                else if(blocks.rejects.length==0&&!blocks.mismatch){
                  $scope.XLfilters.results.push(data[i]);
                    blocks.allows.forEach(function(x){x.visible=true});
                    /*blocks.allows.forEach((x)=>{x.visible=true});*/
                }
            }
            for (j=0; j<filters.length; j++) {
                filter=filters[j];filter.options=[];
                for(k=0;k<filter.list.length;k++){
                  if(filter.list[k].visible && filter.list[k].match) filter.options.push(filter.list[k]);
                }
            }
        }


                    function createXLfilters(arr, fields) {
              $scope.XLfilters.all = arr;             
              for (var j=0; j<fields.length; j++) $scope.XLfilters.list.push($scope.XLfilters.dict[fields[j]]={list:[],dict:{},field:fields[j],searchText:"",active:false,options:[]});
              for (var i=0,z; i<arr.length; i++) for (j=0; j<fields.length; j++) {
                  z=$scope.XLfilters.dict[fields[j]];
                  z.dict[arr[i][fields[j]]] || z.list.push(z.dict[arr[i][fields[j]]]={title:arr[i][fields[j]],checked:true, visible:false,match:false});
              }
        }

        createXLfilters(usecaseData.list, ['searchId', 'ucname', 'company', 'division0', 'valueChain0', 'country', 'aiuc', 'resPerson', 'resPersonEmail', 'assocPerson1', 'assocPersonEmail1', 
            'pocSwarm', 'respBusinessUnit', 'emailRespBusinessUnit', 'businessDept', 'respItx', 'emailRespItx', 'itxDept', 'externalPartner', 'ucFullName', 'businessNeed', 
            'rolesResponsibilities', 'appearanceDate', 'dependencies', 'expetedBenefit', 'monetaryBenefit', 'problemType', 'method', 'dataSources', 'monetizeData', 'knowCustomer', 
            'incUtilization', 'monetization', 'stratAddedValue','feasibility', 'mvp', 'tagsKeywords', 'phase', 'activity', 'ucStatus', 'activityStart', 'curStatusComments', 'nextSteps', 
            'pocStartDate', 'availabilityDate', 'pocPresentationDate', 'decisionDate', 'appLiveDate', 'pocResult', 'pocTargetDate', 'datePocClosing']);
        //createXLfilters(vm.usecase_overview, ['ucname','resPerson']);             
    });

Answer 1

Finally after a study on the code, I came up with a solution. The list was returning undefined when an element is not found. So it was not working with Null values.

Just had to add a check for undefined in the controller's XLfiltrate function and it worked.

if(filter.list[k].title){
                      filter.list[k].match=filter.regex?filter.list[k].title.match(filter.regex):true;
                  }