Arrays - Javascript - filter array of objects using input search

Question

I am trying to filter a list using react, but surprisingly, for such a common task, cannot find anything online to help me achieve this.

I have an array of users which I then want to filter through (starting off with name - I can work out filtering by age then). The array is in my redux store and looks like the below.

let users = [
  {
    name: 'Raul',
    age: 29
  },
  {
    name: 'Mario',
    age: 22
  }
];

My entire component looks like the below.

class Test extends Component {

    constructor(props) {
        super(props);

        this.state = {
            users: this.props.users

        };

        this.filterList = this.filterList.bind(this);

    }

    componentWillReceiveProps(nextProps) {

        this.setState({
            users: nextProps.users
        });

    }

    filterList(event) {

        let users = this.state.users;
        users = users.filter(function(user){
        //unsure what to do here
        });
        this.setState({users: users});
    }

  render(){

    const userList = this.state.users.map((user) => {
      return <li>{user.name} {user.age}</li>;
    });

    return(
      <input type="text" placeholder="Search" onChange={this.filterList}/>
      <ul>
        { userList }
      </ul>
    );

  }
}

apologies @pablogq filter by name. well ideally both, but can start with name — user7597670
– user7597670, Commented Mar 24, 2017 at 14:49

Fabian Schultz · Accepted Answer · 2017-03-24 16:40:20Z

5

If you want to filter for name you can use .filter together with .startsWith or .indexOf to return true or false for a given user.

You've also set a new list of users on the onChange event, which results in an empty array sooner or later. Here I've used the user state that is only changed by the props, and a filteredUsers that is changed when a keystroke happened.

class Test extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      users: this.props.users,
      filteredUsers: this.props.users,
      q: ''
    };

    this.filterList = this.filterList.bind(this);
    this.onChange = this.onChange.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    this.setState(
      {
        users: nextProps.users,
        filteredUsers: nextProps.users
      },
      () => this.filterList()
    );
  }

  onChange(event) {
    const q = event.target.value.toLowerCase();
    this.setState({ q }, () => this.filterList());
  }

  filterList() {
    let users = this.state.users;
    let q = this.state.q;

    users = users.filter(function(user) {
      return user.name.toLowerCase().indexOf(q) != -1; // returns true or false
    });
    this.setState({ filteredUsers: users });
  }

  render() {
    const userList = this.state.filteredUsers.map(user => {
      return <li>{user.name} {user.age}</li>;
    });

    return (
      <div>
        <input
          type="text"
          placeholder="Search"
          value={this.state.q}
          onChange={this.onChange}
        />
        <ul>
          {userList}
        </ul>
      </div>
    );
  }
}

const userList = [
  {
    name: 'Raul',
    age: 29
  },
  {
    name: 'Mario',
    age: 22
  }
];

ReactDOM.render(<Test users={userList} />, document.getElementById('root'));

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

edited Mar 24, 2017 at 16:40

answered Mar 24, 2017 at 15:39

Fabian Schultz

18.6k6 gold badges54 silver badges58 bronze badges

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

9 Comments

user7597670 Over a year ago

how would the index of look?

Fabian Schultz Over a year ago

You can do an if statement there. If the result from .indexOf(q) is -1, return false. Else, return true. Or user.name.toLowerCase().indexOf(q) != -1 to do it in one line.

user7597670 Over a year ago

thanks! just one issue! the array of users keeps growing so when there are more users added they are not shown. do you know how i can get around this.?!

Fabian Schultz Over a year ago

Updated my answer. You want to also update the filteredUsers state when the component receives new props. Also you might want to call filterList manually again depending on the behaviour you want.

user7597670 Over a year ago

this is what I had already tried, but this breaks the filter search as the whole array is shown again when a new user is added to the array. Know what I mean?

|

Mayank Shukla · Accepted Answer · 2017-03-24 15:49:35Z

You need one more state variable to store the search result, initialise that variable by same data, once user type anything store the filtered data in that, Try this:

let users = [
  {
    name: 'Raul',
    age: 29
  },
  {
    name: 'Mario',
    age: 22
  }
];

class Test extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            users: users,
            result: users,
        };

        this.filterList = this.filterList.bind(this);

    }

    componentWillReceiveProps(nextProps) {

        this.setState({
            users: nextProps.users,            
        });

    }

    filterList(event) {
        let value = event.target.value;
        let users = this.state.users, result=[];
        result = users.filter((user)=>{
            return user.name.toLowerCase().search(value) != -1;
        });
        this.setState({result});
    }

  render(){

    const userList = this.state.result.map((user) => {
      return <li>{user.name} {user.age}</li>;
    });

    return(<div>
      <input type="text" placeholder="Search" onChange={this.filterList}/>
      <ul>
        {userList}
      </ul>
      </div>
    );

  }
}

ReactDOM.render(<Test/>, document.getElementById('app'))

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


<div id='app'></div>

Vinesh sarathy · Accepted Answer · 2021-04-15 09:14:02Z

1

let datas =[
  {   
      "id":1,
      "title":"Ucat",
      "handle":"mi"
  },
  {
      "id":2,
      "title":"Acat",
      "handle":"csk"
  },
  {
      "id":3,
      "title":"Vcat",
      "handle":"kkr"
  },
  {
      "id":4,
      "title":"Atar",
      "handle":"pkbs"
  }];
const [search, setSearch] =useState(datas);
const handleInputChange = (e) => {
var dm = e.target.value;
var str =dm.toString();
var debug = datas.filter(x=> x["title"].toLowerCase().includes(str));
setSearch(debug);};


<input type="text"  onChange={handleInputChange}/>
{search.map((item)=>(
    <div key={item.id}>
        <ul>
            <li>
            {item.handle} 
            <br/>
            {item.title}
            </li>
        </ul>
    </div>
))};

answered Apr 15, 2021 at 9:14

Vinesh sarathy

211 bronze badge

1 Comment

user14709104 Over a year ago

When posting an answer please provide relevant explanation so the the person who asked can understand the solution better

Doeke Norg · Accepted Answer · 2017-03-24 15:37:54Z

0

If you want to filter the list, you must have a criteria to filter against. For instance you have a variable let filterAge = 18;

In that case you can filter the userlist against that value using

let users = users.filter(function(user){
    //return all users older or equal to filterAge
    return user.age >= filterAge;        
});

Every result from the function that equals true, will be added to the users variable. A false return will leave it out. How you determine true / false is up to you. Hardcode it (not very useful), a simple equals statement (as above) or a function doing higher math. Your choice.

edited Mar 24, 2017 at 15:37

answered Mar 24, 2017 at 15:24

Doeke Norg

5610 bronze badges

6 Comments

user7597670 Over a year ago

codepen.io/pjmtokyo/pen/ZGVjVV this one seems to do it on a case by case basis, without something as explicit as if user is older than 18

user7597670 Over a year ago

can u see where search is defined for this one?

Doeke Norg Over a year ago

Well, here he is specifing using a function to determine if the (lowercase) name has the given value (in lowercase), using the search function.

user7597670 Over a year ago

ah yeah, didnt know there was a js search method. feel free to update your answer and I can give u a green tick

Doeke Norg Over a year ago

He is using the default javascript string search function. See w3schools.com/jsref/jsref_search.asp for more details. If that string contains the given value, it returns the place in the string where that value starts. If it's at the begin, the value returns 0. If it isn't in there, it returns -1. But overall he matches the search value against every item in the filter function.

|

Rafael Inácio · Accepted Answer · 2021-12-05 22:19:38Z

0

It always worked well for me that way.

const [data, setData] = useState([{name: 'Kondo'}, {name: 'Gintoki'}])

const handleFilterFilesTable = () => {
    return data
      .filter((element) => {
        if (searchText !== "") {
          return element?.name?.toLowerCase()?.includes(searchText?.toLowerCase())
        }

        return element
      })
  }

// ...
return (
 //...
 <Table data={handleFilterFilesTable()} />
)

That way I can apply multiple filters working together simply by extending the filter method like this

// ...
return data.filter().filter().filter()//...
// ...

answered Dec 5, 2021 at 22:19

Rafael Inácio

1911 silver badge5 bronze badges

Collectives™ on Stack Overflow

Arrays - Javascript - filter array of objects using input search

5 Answers 5

9 Comments

Comments

1 Comment

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

9 Comments

Comments

1 Comment

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related