Javascript dynamic filter over js with array of criterions

Question

const arr = [
   {label : 'lbl1', text: 'txt1'},
   {label : 'lbl2', text: 'txt2'},
   {label : 'lbl3', text: 'txt3'},
   {label : 'lbl4', text: 'txt4'},
   // much more items
];

const filterBy = [
    {label: 'lbl1',text: 'txt1'},
    {label : 'lbl4', text: 'txt4'}
    //may have 0 or more items
];

I want to dynamically filter arr by filterBy. filterBy is coming from the UI... here its just a representation of what the user can pass...

in a static way I would do:

arr.filter(x => (x.text == filterBy[0].text && x.label == filterBy[0].label) ||
   .            (x.text == filterBy[1].text && x.label == filterBy[1].label)
);

Is it possible to chain dynamic criterions in JS? Thanks

You mean that filterBy can also have not 2, but many items in it? — Zoli Szabó
– Zoli Szabó, Commented Jul 6, 2021 at 4:57
@RajdeepDebnath filterBy is something the use pass to, to it is totally dynamic — SexyMF
– SexyMF, Commented Jul 6, 2021 at 4:59
There can be many properties in filterBy and arr should be filtered by it. Is that right? — DecPK
– DecPK, Commented Jul 6, 2021 at 5:00

DecPK · Accepted Answer · 2021-07-06 04:57:52Z

1

You can easily achieve this result using filter and some

const arr = [
  { label: "lbl1", text: "txt1" },
  { label: "lbl2", text: "txt2" },
  { label: "lbl3", text: "txt3" },
  { label: "lbl4", text: "txt4" },
];

const filterBy = [
  { label: "lbl1", text: "txt1" },
  { label: "lbl4", text: "txt4" },
];

const result = arr.filter(({ label, text }) =>
  filterBy.some((o) => o.label === label && o.text === text)
);

console.log(result);

answered Jul 6, 2021 at 4:57

DecPK

25.4k6 gold badges32 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

brk · Accepted Answer · 2021-07-06 05:02:09Z

0

You can use reduce and inside the callback use filter to get the items from arr

const arr = [{
    label: 'lbl1',
    text: 'txt1'
  },
  {
    label: 'lbl2',
    text: 'txt2'
  },
  {
    label: 'lbl3',
    text: 'txt3'
  },
  {
    label: 'lbl4',
    text: 'txt4'
  },
  //.... much more items
];

const filterBy = [{
    label: 'lbl1',
    text: 'txt1'
  },
  {
    label: 'lbl4',
    text: 'txt4'
  }
];


const res = filterBy.reduce((acc, curr) => {

  acc.push(...arr.filter(item => {
    return item.label === curr.label && item.text === curr.text
  }))

  return acc;
}, []);

console.log(res)

answered Jul 6, 2021 at 5:02

brk

50.3k10 gold badges59 silver badges85 bronze badges

Comments

Ernesto · Accepted Answer · 2021-07-06 05:02:57Z

0

use an obj instead of an array


const arr = [
   {label : 'lbl1', text: 'txt1'},
   {label : 'lbl2', text: 'txt2'},
   {label : 'lbl3', text: 'txt3'},
   {label : 'lbl4', text: 'txt4'},
];

const filterBy = {
  criteria1:"lbl1",
  criteria2:"txt1",
  criteria3:"lbl4",
  criteria4:"txt2",
}

const filtered = arr.filter(item => filterBy["criteria1"] === item.label ||filterBy["criteria2"] === item.text)||filterBy["criteria3"] === item.label || filterBy["criteria4"] === item.text);

the other "solutions" have to make two or plus loops. while this one only do one.

while more criterias you have, the uglier it is going to look like

answered Jul 6, 2021 at 5:02

Ernesto

4,3461 gold badge17 silver badges30 bronze badges

Comments

Zoli Szabó · Accepted Answer · 2021-07-06 05:10:53Z

0

const arr = [
   {label : 'lbl1', text: 'txt1'},
   {label : 'lbl2', text: 'txt2'},
   {label : 'lbl3', text: 'txt3'},
   {label : 'lbl4', text: 'txt4'},
   // much more items
];

const filterBy = [
    {label: 'lbl1',text: 'txt1'},
    {label : 'lbl4', text: 'txt4'}
    //may have 0 or more items
];

// If you want `||` between the filters.
console.log(arr.filter(x => filterBy.some(f => f.label === x.label && f.text === x.text)));

// If you want `&&` between the filters.
console.log(arr.filter(x => filterBy.every(f => f.label === x.label && f.text === x.text)));

edited Jul 6, 2021 at 5:10

answered Jul 6, 2021 at 5:04

Zoli Szabó

4,5851 gold badge16 silver badges22 bronze badges

Comments

Filipe Mendes · Accepted Answer · 2021-07-06 05:34:06Z

0

I think this is what you wants.. dynamic criterias.. using Object.keys and reduce you can get this.

const arr = [
   {label : 'lbl1', text: 'txt1'},
   {label : 'lbl2', text: 'txt2'},
   {label : 'lbl3', text: 'txt3'},
   {label : 'lbl4', text: 'txt4'},
   // much more items
];

const filterBy = [
    {label: 'lbl1',text: 'txt1'},
    {label : 'lbl4', text: 'txt4'}
];

const filtered = arr.filter(item => {
    return filterBy.some(fItem => {
           const keys = Object.keys(fItem);
           return keys.length > 0 && keys.reduce((acc, k) => {
            return acc && item[k] === fItem[k];
           }, true)
    });
});

console.log(filtered)

edited Jul 6, 2021 at 5:34

answered Jul 6, 2021 at 5:21

Filipe Mendes

1859 bronze badges

Collectives™ on Stack Overflow

Javascript dynamic filter over js with array of criterions

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related