Filter array based on array of filters in Javascript

Question

I have an array of users and also an array of filters.

I need to filter users based on the array of filters but when I do it will filter on one array but not the others

My filters object looks like this:

filters: {
  levels: [],
  locations: ['Laois'],
  subjects: ['Art']
}

My users look like this:

const users = [
  {
    email: '[email protected]',
    levels: ['Ordinary'],
    location: 'Laois',
    subjects: ['Art', 'German']
  },
  {
    email: '[email protected]',
    levels: ['Higher', 'Ordinary'],
    location: 'Laois',
    subjects: ['English', 'German']
  }
]

Based on the filter above, once filtered the users should only be one because it contains 'Art' and 'Laois':

[{
    email: '[email protected]',
    levels: ['Ordinary'],
    location: 'Laois',
    subjects: ['Art', 'German']
  },
]

But I am still getting the two users:

EDIT My Code:

applyFilter = (visable) => {
    let { filters, users } = this.state;
    const { subjects, locations, levels } = filters;


    let filteredUsers = [];
    const filteredData = users.filter((user) =>
      user.subjects.some(subject => subjects.includes(subject)) ||
      locations.some(location => location === user.location) ||
      user.levels.some(level => levels.includes(level))
    );

    console.log(filteredData)


    if (!subjects.length && !locations.length && !levels.length) {
      filteredUsers = users;
    } else {
      filteredUsers = filteredData;
    }

    this.setState({
      filterModalVisible: visable,
      filteredResults: filteredUsers.length >= 0 ? filteredUsers : [],
    });
  }

please add your code.

Nina Scholz
– Nina Scholz

2019-02-14 11:15:09 +00:00
Commented Feb 14, 2019 at 11:15 — Nina Scholz
– Nina Scholz, Commented Feb 14, 2019 at 11:15

Nenad Vracar · Accepted Answer · 2019-02-14 11:19:23Z

1

You can do this using filter and every methods by checking if every element from the filters value exist in the user value with the same key.

const filters = {"levels":[],"locations":["Laois"],"subjects":["Art"]}
const users = [{"email":"[email protected]","levels":["Ordinary"],"locations":"Laois","subjects":["Art","German"]},{"email":"[email protected]","levels":["Higher","Ordinary"],"locations":"Laois","subjects":["English","German"]}]

const res = users.filter(user => {
  return Object.entries(filters)
    .every(([key, value]) => {
      if (Array.isArray(value)) {
        return value.every(filter => {
          return user[key] && user[key].includes(filter)
        })
      } else {
        return user[key] == value
      }
    })
})

console.log(res)

answered Feb 14, 2019 at 11:19

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

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

Comments

Mamun · Accepted Answer · 2019-02-14 11:22:40Z

1

You can try with filter()

const filters = {
  levels: [],
  locations: ['Laois'],
  subjects: ['Art']
}

const users = [
  {
    email: '[email protected]',
    levels: ['Ordinary'],
    location: 'Laois',
    subjects: ['Art', 'German']
  },
  {
    email: '[email protected]',
    levels: ['Higher', 'Ordinary'],
    location: 'Laois',
    subjects: ['English', 'German']
  }
]

var res = users.filter(info => info.location==filters.locations[0] && info.subjects.includes(filters.subjects[0]));

console.log(res);

answered Feb 14, 2019 at 11:22

Mamun

69k9 gold badges51 silver badges62 bronze badges

Comments

Nikhil Aggarwal · Accepted Answer · 2019-02-14 11:35:15Z

You can have a generic solution for any filter key by using Array.filter, Array.some and Array.includes

Use filter to validate each entry against all the filter conditions
If an filter condition has an empty list, continue to check for next condition
For locations, as the filter key is different from the key in object, add a specific check for that where we check for location to be included in the locations array
For other fields, check for existence of atleast 1 entry in array that exists in filter value. If there exists a value, continue to check for next condition.
After condition check, confirm if the entry is valid, if not break the loop and return false

let filters = {levels: [],locations: ['Laois'],subjects: ['Art']};
let users = [{email: '[email protected]',levels: ['Ordinary'],location: 'Laois',subjects: ['Art', 'German']},{email: '[email protected]',levels: ['Higher', 'Ordinary'],location: 'Laois',subjects: ['English', 'German']}];

users = users.filter(v => {
  let response = true;
  for (let filter in filters) {
    if(!filters[filter].length) continue;
    if(filter === "locations") {
      response = response && filters.locations.includes(v.location)
    } else response = response && v[filter].some(f => filters[filter].includes(f));
    if(!response) break;
  }
  return response;
});
console.log(users);

ellipsis · Accepted Answer · 2019-02-14 11:30:42Z

0

Using filter inside filter

const filters = {
  levels: [],
  locations: ['Laois'],
  subjects: ['Art']
}

const users = [
  {
    email: '[email protected]',
    levels: ['Ordinary'],
    location: 'Laois',
    subjects: ['Art', 'German']
  },
  {
    email: '[email protected]',
    levels: ['Higher', 'Ordinary'],
    location: 'Laois',
    subjects: ['English', 'German']
  }
]
console.log(users.filter((e) => {
  var arr = e.subjects.filter((x) => filters.subjects.includes(x))
  if (arr.length > 0 && filters.locations.includes(e.location))
    return e
}))

edited Feb 14, 2019 at 11:30

answered Feb 14, 2019 at 11:20

ellipsis

12.2k2 gold badges19 silver badges33 bronze badges

Comments

AvcS · Accepted Answer · 2019-02-14 11:30:44Z

You need to use && instead of || if you want to match all conditions
As per your requirements, you need all of them to match if filter array is empty, so you can just bypass the check for that case

applyFilter = (visable) => {
    let { filters, users } = this.state;
    const { subjects, locations, levels } = filters;

    const filteredResults = users.filter((user) =>
        (!subjects.length || user.subjects.some(subject => subjects.includes(subject))) &&
        (!locations.length || locations.some(location => location === user.location)) &&
        (!levels.length || user.levels.some(level => levels.includes(level)))
    );

    this.setState({
        filterModalVisible: visable,
        filteredResults
    });
}

Collectives™ on Stack Overflow

Filter array based on array of filters in Javascript

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

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

Related