Params for multiple filters

Question

I have problem when I try to set params to URL for filtering table.

I create reusable method for handle this, but I have problem when I have multiple object for set to params... here is example

My params look like this

defaultParams = {
    page: '0',
    pageSize: '5',
    sortBy: 'username',
    sortByType: 'ASC',
    search: null,
    filter: {
      enabled: null,
      activated: null,
      student: {   --> this obj
        id: 1
      },
      role: {    --> this ob
        role: 'ADMIN'
      }
    }
  };

Problem is when I have multiple objects in filter obj, here you can see

My URL needs to look like this

?page=0&pageSize=5&sortBy=username&sortByType=ASC&filter=student.id:1,role.role:ADMIN

But I get like this

?page=0&pageSize=5&sortBy=username&sortByType=ASC&filter=student.id:1,student.role.role:ADMIN

I get here for role also STUDENT --> student.role.role:ADMIN instead of role.role:ADMIN

Here is stackBlitz example, in the console you can see problem

How to handle this?

Thnx

StackSnippet

const params = defaultParams = {
  page: '0',
  pageSize: '5',
  sortBy: 'username',
  sortByType: 'ASC',
  search: null,
  filter: {
    enabled: null,
    activated: null,
    student: { // -- > this obj
      id: 1
    },
    role: { // -- > this ob
      role: 'ADMIN'
    }
  }
};

const isObject = o => {
  return (!!o) && (o.constructor === Object);
}


const buildFilterParams = obj => {
  let filterParams = '';
  const keyCount = Object.keys(obj).length;
  let count = 1;

  for (const key in obj) {
    const value = obj[key];

    if (!isObject(value)) {
      if (value !== null && value !== undefined) {

        filterParams += `${key}:${value}`;
        if (keyCount > count) {
          filterParams += ',';
        }
      }

      count = count + 1;
    } else {
      filterParams += `${key}.`;

      console.log(filterParams)

      buildFilterParams(value);
    }
  }
};
buildFilterParams(params)

Answer 1

The problem was with nested looping, it is still holding previous loop value and binding it to next result. several solution to this issue

1. clearing filterParams value in else block

defaultParams = {
    page: '0',
    pageSize: '5',
    sortBy: 'username',
    sortByType: 'ASC',
    search: null,
    filter: {
      enabled: null,
      activated: null,
      student: {
        id: 1
      },
      role: {
        role: 'ADMIN'
      }
    }
  };


  buildFilterParams(defaultParams);

    
  function buildFilterParams(obj) {
  let filterParams = '';
    const keyCount = Object.keys(obj).length;
    let count = 1;

    for (const key in obj) {
      const value = obj[key];

      if (!this.isObject(value)) {
        if (value !== null && value !== undefined) {

          filterParams += `${key}:${value}`;
          if (keyCount > count) {
            filterParams += ',';
          }
        }

        count = count + 1;
      } else {
        filterParams += `${key}.`;

        console.log(filterParams)
        
        this.buildFilterParams(value);
        filterParams = ''; // clearing the value
      }
    }
  }

  function isObject(o) {
    return (!!o) && (o.constructor === Object);
  }

2. Caching the value of previous function return and adding in to next recursion.

  var filterParams = '';
defaultParams = {
    page: '0',
    pageSize: '5',
    sortBy: 'username',
    sortByType: 'ASC',
    search: null,
    filter: {
      enabled: null,
      activated: null,
      student: {
        id: 1
      },
      role: {
        role: 'ADMIN'
      }
    }
  };


  console.log(buildFilterParams(defaultParams));


  function buildFilterParams(obj) {
    const keyCount = Object.keys(obj).length;
    let count = 1;

    for (const key in obj) {
      const value = obj[key];

      if (!this.isObject(value)) {
        if (value !== null && value !== undefined) {

          filterParams += `${key}:${value}`;
          if (keyCount > count) {
            filterParams += ',';
          }
        }

        count = count + 1;
      } else {
        filterParams += `${key}.`;
        filterParams+= this.buildFilterParams(value);
         if (keyCount > count) {
            filterParams += ',';
          }
        //console.log(filterParams)
        
        //filterParams = '';
      }
    }
    return filterParams;
  }

  function isObject(o) {
    return (!!o) && (o.constructor === Object);
  }