我如何过滤json获取数据答案

【问题标题】：how do i filter json get data我如何过滤json获取数据
【发布时间】：2019-06-25 04:53:28
【问题描述】：

我想在使用 axios 从随机用户 API 获取后显示性别为女性的随机用户

我尝试过 .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>
    );
  }
}

我只想显示女性用户

【问题讨论】：

您在获得响应之前正在过滤。得到响应后过滤。然后在里面。

标签： javascript json reactjs axios

【解决方案1】：

你应该在.then 函数中写.filter，因为axios 返回一个promise。

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

【讨论】：

【解决方案2】：

如果你只显示female，你应该更新你的api url参数，这样你就不需要额外的过滤器了。

仅限用户（限制 5 个）

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

仅限女性用户（限 5 人）

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

欲了解更多信息，请参阅https://randomuser.me/documentation#howto

【讨论】：

【解决方案3】：

您必须在 map 之前过滤您的响应，但您应该在 .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 }));
}

【讨论】：