how to loop through and remove the object in which array is empty

Question

  FilterCriterias: any = []

  public productChanged(filterValue: any) {

      if(this.FilterCriterias?.length == 0) {
        this.FilterCriterias.push({
          filtercolumnName: 'productType',
          filterValueList: [filterValue.name]
        })
      } else {
        this.FilterCriterias.forEach((elem: any, index: number) => {
          if(elem.filtercolumnName == 'productType') {
            const idx = elem.filterValueList.indexOf(filterValue.name)
            if(idx >= 0) {
                elem.filterValueList.splice(idx, 1)
                // if (elem.filterValueList?.length == 0 && elem.filtercolumnName == 'productType') {
                //   const idy = elem.filtercolumnName.indexOf('productType')
                //   if (idy > 0) {
                //     this.FilterCriterias.splice(idy, 1)
                //   }
                // }
            } else {
              elem.filterValueList.push(filterValue.name)
            }
          } else {
            this.FilterCriterias.push({
              filtercolumnName: 'productType',
              filterValueList: [filterValue.name]
            })
          }
        });
      }

      this.FilterCriterias.forEach((element: any) => {
        if(element.filterValueList.length == 0 && element.filtercolumnName == 'productType') {
          console.log(true);
          const idy = element.filtercolumnName.indexOf('productType')
          console.log(idy);
        }
      });

       // removing the duplicates
       var filtered = this.FilterCriterias.reduce((filtered: any, item: any) => {
        //  console.log(item);
        if(!filtered.some((filteredItem: any) => JSON.stringify(filteredItem.filtercolumnName) == JSON.stringify(item.filtercolumnName)))
        filtered.push(item)
        return filtered
      }, [])

    console.log('filtered',filtered);

  }

     public collectionChanged(filterValue: any) {
      
      if(this.FilterCriterias?.length == 0) {
        this.FilterCriterias.push({
          filtercolumnName: 'collections',
          filterValueList: [filterValue.name]
        })
      } else {
        this.FilterCriterias.forEach((elem: any, index: number) => {
          if(elem.filtercolumnName == 'collections') {
            const idx = elem.filterValueList.indexOf(filterValue.name)
            if(idx >= 0) {
                elem.filterValueList.splice(idx, 1)
              // if(elem.filterValueList?.length == 0) {
              //   const idy = elem.filtercolumnName.indexOf('collections')
              //   console.log('collectoinindex',idy);
              //   if(idy > 0) {
              //     this.FilterCriterias.splice(idy, 1)
              //   }
              // }
            } else {
              elem.filterValueList.push(filterValue.name)
            }
          } else {
            this.FilterCriterias.push({
              filtercolumnName: 'collections',
              filterValueList: [filterValue.name]
            })
          }
        });
      }

      this.FilterCriterias.forEach((element: any) => {
        if(element.filterValueList.length == 0  && element.filtercolumnName == 'collections') {
          console.log(true);
          const idy = element.filtercolumnName.indexOf('collections')
          console.log(idy);
        }
      });


       // removing the duplicates
       var filtered = this.FilterCriterias.reduce((filtered: any, item: any) => {
        //  console.log(item);
        if(!filtered.some((filteredItem: any) => JSON.stringify(filteredItem.filtercolumnName) == JSON.stringify(item.filtercolumnName)))
        filtered.push(item)
        return filtered
      }, [])

    console.log('filtered',filtered);
  }

I am having two functions in which I want to generate a format like below

    FilterCriterias: [
            {
            filtercolumnName:`producttype`,
            filterValueList: [`hat`, 'cup']
          },
          {
            filtercolumnName: "collections",
            filterValueList: [`modern`, 'pant']
           },
        ]

if the filterValueList.length == 0 means i want to remove the entire object which hold the filerValueList.length == 0. For Example, if filterValueList of collections is empty means only the producttype needs to be there in the array.

user_15159603 · Answer

You can achieve that using Array.filter function, like the following:

this.FilterCriterias = this.FilterCriterias.filter(
  (item) => !!item.filterValueList.length
);

user_6020432 · Answer

I am guessing this should do the job if I understood correctly what you want to do. This will loop through all objects of the array, check if their filterValueList array is empty and if so, it will remove them from the array:

let i = 0;
while (i < FilterCriterias.length) {
    if(FilterCriterias[i].filterValueList.length == 0) {
        FilterCriterias.splice(i, 1);
    } else {
        i++;
    }
}

how to loop through and remove the object in which array is empty

2 Answers