Arrays - Javascript - filtrer un tableau d'objets en utilisant la recherche par entrée

Question

J'essaie de filtrer une liste en utilisant react, mais étonnamment, pour une tâche aussi courante, je ne trouve rien en ligne pour m'aider à y parvenir.

J'ai un tableau d'utilisateurs que je veux ensuite filtrer (en commençant par le nom - je peux ensuite travailler sur le filtrage par âge). Le tableau est dans mon magasin redux et ressemble à ce qui suit.

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

L'ensemble de mon composant ressemble à ce qui suit.

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>
    );

  }
}

Answer 1

Si vous voulez filtrer pour name vous pouvez utiliser .filter en même temps que .startsWith ou .indexOf pour retourner vrai ou faux pour un utilisateur donné.

Vous avez également défini une nouvelle liste d'utilisateurs dans l'événement onChange, ce qui se traduit tôt ou tard par un tableau vide. Ici, j'ai utilisé la méthode user qui n'est modifié que par l'accessoire, et une filteredUsers qui est modifié lorsqu'une touche a été frappée.

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>

Answer 2

Si vous souhaitez filtrer la liste, vous devez disposer d'un critère de filtrage. Par exemple, vous avez une variable let filterAge = 18;

Dans ce cas, vous pouvez filtrer la liste des utilisateurs en fonction de cette valeur en utilisant la méthode suivante

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

Chaque résultat de la fonction qui est égal à vrai, sera ajouté à l'objet users variable. Un faux retour la laissera de côté. La façon dont vous déterminez vrai / faux vous appartient. Vous pouvez le coder en dur (ce qui n'est pas très utile), utiliser une simple instruction égale (comme ci-dessus) ou une fonction qui effectue des calculs plus élevés. À vous de choisir.

Answer 3

Vous avez besoin d'une autre state pour stocker le résultat de la recherche, initialisez cette variable avec les mêmes données, une fois que l'utilisateur tape quelque chose, stockez les données filtrées dans cette variable, essayez ceci :

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>