How to update filter array without using React?

Question

Let's say I have some code, like this:

const filter = {
      address: 'India',
      name: 'Aleena'
    };

const users = [{
    name: 'John Doe',
    email: '[email protected]',
    age: 25,
    address: 'USA'
  },
  {
    name: 'Aleena',
    email: '[email protected]',
    age: 35,
    address: 'India'
  },
  {
    name: 'Mark Smith',
    email: '[email protected]',
    age: 28,
    address: 'England'
  }
];

const filteredUsers = users.filter((item) => {
  for (var key in filter) {
    if (item[key] === undefined || item[key] != filter[key])
      return false;
  }
  return true;
});

How can I dynamically update/change the filter object to allow users to choose which key:values to use in the filtering process? I know people normally use React for this kind of stuff, but I wondered if there was a "vanilla" way to do it.

Take input from dropdown via javascript and add some appropriate eventListener on element and store it in variable and pass that variable for filter condition. — GodWin1100
– GodWin1100, Commented Sep 26, 2022 at 23:48

Stefan L. · Accepted Answer · 2022-09-26 23:57:37Z

0

Actually, filter does it for you already. Filter returns a new filtered array without mutating the original array.

"Users" is the original array. "FilteredUsers" is the newly created filtered array off users.

To clone/copy the original Users array above, you can do:

let clonedArray = [...Users]

answered Sep 26, 2022 at 23:57

Stefan L.

161 bronze badge

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

Comments

Stefan L. · Accepted Answer · 2022-09-27 00:08:33Z

0

The users array is a perfect candidate for this. Let's say you want to add all of the users ages together. It's pretty cool-simple.

1- function addAges(acc,ele) {return acc + ele.age}

2- Users.reduce(addAges, 0);

That'it. No console.log either. It'll returned the sum

answered Sep 27, 2022 at 0:08

Stefan L.

161 bronze badge

Comments

Cassio Fiuza · Accepted Answer · 2022-09-27 01:15:02Z

0

here's a very basic example in CodeSandBox to get an idea of what to do.

I believe it meets the requirements of your question

https://codesandbox.io/s/vanila-js-dynamic-filter-6yhhe6?file=/src/index.js

answered Sep 27, 2022 at 1:15

Cassio Fiuza

304 bronze badges

Collectives™ on Stack Overflow

How to update filter array without using React?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related