How can I filter a list with multiple fields? The program that I have has a list of data where there are 2 filters: work and city, but if I select both it doesn't take both the fields it only filters the previously selected field.

How can a make this program filter with both the fields?

How can I filter a list with multiple fields? The program that I have has a list of data where there are 2 filters: work and city, but if I select both it doesn't take both the fields it only filters the previously selected field.

How can a make this program filter with both the fields?

• javascript
• reactjs

Share Improve this question Follow edited Jun 10, 2017 at 10:49 Frits 7,6241010 gold badges4747 silver badges6565 bronze badges asked Jun 7, 2017 at 12:08 Steve SmithSteve Smith 7333 silver badges99 bronze badges 1

• Could you post your code? – gkubed Commented Jun 7, 2017 at 17:07

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

You could use a local variable inside your render() function and filter twice depending on whether or not said filter is on or not.

---

I have posted a simple demo below. Enter the full name or city to filter the list.

class MyApp extends React.Component {

  constructor() {
    super();
    this.state = {
      filterName: "",
      filterCity: "",
      friends: [
        {id: 1, name: "Carl", city: "New York"},
        {id: 2, name: "Anna", city: "New York"},
        {id: 3, name: "Carl", city: "Sydney"}
      ]
    };
  }
  
  changeFilterName = (e) => {
    this.setState({filterName: e.target.value});
  }
  
  changeFilterCity = (e) => {
    this.setState({filterCity: e.target.value});
  }
  
  render() {
    let friends = this.state.friends.slice();
    if(this.state.filterName) {
      friends = friends.filter(item => item.name.toLowerCase() == this.state.filterName.toLowerCase());
    }
    if(this.state.filterCity) {
      friends = friends.filter(item => item.city.toLowerCase() == this.state.filterCity.toLowerCase());
    }
    return(
      <div>
        <label for="name">Name: </label>
        <input id="name" onChange={this.changeFilterName} value={this.state.filterName} />
        <label for="city">City: </label>
        <input id="city" onChange={this.changeFilterCity} value={this.state.filterCity} />
        <ul>
          {friends.map(item => <li key={item.id}>{item.name + " - " + item.city}</li>)}
        </ul>
      </div>
    );
  }
}

ReactDOM.render(<MyApp />, document.getElementById("myApp"));

<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="myApp"></div>

To filter a list with multiple fields, you need to apply both filters simultaneously. Here's an example of how you can achieve this but before that i want to explain the process step by step:

Set up your filter options:

• Create two states to store the selected work and city filters.
• Update these states whenever the user selects a filter option.

Apply the filters to your list:

• On event handler Iterate over the list of data.

• Check if each item matches the selected work and city filters.

• Only display the items that satisfy both conditions.

Here's a code to in js that will illustrate the concept, and if you need to understand the concept in pure react visit the codesandbox url :

The data that will used in the example is this:

const data = [
  { id: 0, name: "Abidullah", work: "Developer", city: "New York" },
  { id: 1, name: "John Doe", work: "Developer", city: "New York" },
  { id: 2, name: "Adam", work: "Designer", city: "New York" },
  { id: 3, name: "Jane Smith", work: "Designer", city: "Los Angeles" },
  { id: 4, name: "Mark Johnson", work: "Developer", city: "San Francisco" },
  { id: 5, name: "Alam", work: "HR", city: "Karachi" }
];

Step 1: Set up filter options

let selectedWork = '';
let selectedCity = '';

Note: Update the selectedWork and selectedCity variables based on user input or events.

Step 2: Apply filters to the data

const filteredData = data.filter(item => {
  // If both work and city filters are selected, apply both filters
  if (selectedWork && selectedCity) {
    return item.work === selectedWork && item.city === selectedCity;
  }
  // If only work filter is selected, apply work filter
  else if (selectedWork) {
    return item.work === selectedWork;
  }
  // If only city filter is selected, apply city filter
  else if (selectedCity) {
    return item.city === selectedCity;
  }
  // If no filters are selected, return all items
  else {
    return true;
  }
});

Finally use the filteredData for display or further processing.

Here is the plete Example:

const data = [
  { id: 0, name: "Abidullah", work: "Developer", city: "New York" },
  { id: 1, name: "John Doe", work: "Developer", city: "New York" },
  { id: 2, name: "Adam", work: "Designer", city: "New York" },
  { id: 3, name: "Jane Smith", work: "Designer", city: "Los Angeles" },
  { id: 4, name: "Mark Johnson", work: "Developer", city: "San Francisco" },
  { id: 5, name: "Alam", work: "HR", city: "Chicago" }
];

let selectedWork = 'Developer';
let selectedCity = 'New York';

const filteredData = data.filter(item => {

  if (selectedWork && selectedCity) {
    return item.work === selectedWork && item.city === selectedCity;
  }
  else if (selectedWork) {
    return item.work === selectedWork;
  }
  else if (selectedCity) {
    return item.city === selectedCity;
  }
  else {
    return true;
  }
});


console.log(filteredData)