Как я могу фильтровать JSON получить данные

Question

Я хочу отобразить случайных пользователей с полом женщины после получения из API случайного пользователя с помощью axios

Я пробовал .filter, .select, но не работал.

componentDidMount() {
    axios
      .get("https://randomuser.me/api/?results=5")
      .filter(function(i, n) {
        return n.gender === "female";
      })
      .then(response =>
        response.data.results.map(user => ({
          name: `${user.name.first} ${user.name.last}`,
          username: `${user.login.username}`,
          email: `${user.email}`,
          image: `${user.picture.thumbnail}`,
          gender: `${user.gender}`
        }))
      )

      .then(users => {
        this.setState({
          users,
          isLoading: false
        });
      })
      .catch(error => this.setState({ error, isLoading: false }));
  }

  render() {
    const { isLoading, users } = this.state;
    return (
      <React.Fragment>
        <h2>Brief list</h2>
        <div>
          {!isLoading ? (
            users.map(user => {
              const { username, name, email, image, gender } = user;

              return (
                <div key={username}>
                  <p>{name}</p>
                  <div>
                    <img src={image} alt={name} />
                  </div>
                  <p>{gender}</p>
                  <p>{email}</p>
                  <hr />
                </div>
              );
            })
          ) : (
            <p>Loading...</p>
          )}
        </div>
      </React.Fragment>
    );
  }
}

Я хочу отображать только тех пользователей, которые являются женщинами

Answer 1

Если вы показываете только для female, вы должны обновить параметры api url, чтобы вам не требовался дополнительный фильтр.

только для пользователей (ограничение 5)

https://randomuser.me/api/?results=5

только для пользователей женского пола (ограничение 5)

https://randomuser.me/api/?results=5&&gender=female

Подробнее см. https://randomuser.me/documentation#howto

Answer 2

Вы должны отфильтровать свой ответ перед картой, как вы пытаетесь это сделать, но вы должны сделать это внутри .then.поэтому ваш componentDidMount должен быть таким:

componentDidMount() {
  axios
    .get("https://randomuser.me/api/?results=5")
    .then(response =>
      response.data.results.filter(item => item.gender === "female")
    )
    .then(femaleUsers =>
      femaleUsers.map(user => ({
        name: `${user.name.first} ${user.name.last}`,
        username: `${user.login.username}`,
        email: `${user.email}`,
        image: `${user.picture.thumbnail}`,
        gender: `${user.gender}`
      }))
    )
    .then(users => {
      this.setState({
        users,
        isLoading: false
      });
    })
    .catch(error => this.setState({ error, isLoading: false }));
}

Answer 3

Вы должны написать .filter в .then функции, потому что axios возвращает обещание.

componentDidMount() { 
axios.get("https://randomuser.me/api/?results=5")
.then(function(data){
   let femaleData = data.results.filter(function(n) { return n.gender === "female"; }) })