filter elements in a array in async function

Question

im trying to filter my api array in this just for the users witch speciality == Dermatologista, can you help me?

  export default class Dermatologistas extends Component{
      state ={
        errorMessage: null,
        users: []
      }

here I create the async function that is getting the users

getUserList = async () => {
    try {
      const response = await api.get('/auth/list');

      const { users } = response.data
      console.log(response.data)
      this.setState({ users });
     
    } catch (response) {
      this.setState({ errorMessage: response.data.error });
    }
  };
  
  componentDidMount() {
    this.getUserList()
  }

here it renders all users and not filter, how can I do this ?

render(){
        const users = this.state.users
        console.log(users)
        return(
          <View >
            { this.state.errorMessage && <Text>{ this.state.errorMessage }</Text> }
            {this.state.users.map(user => (
              <View key={user._id} style={{marginTop: 15, alignItems: 'center'}}>
                <Text>{user.title}</Text>
                <Text>{user.speciality}</Text>
                <Button   title = 'View Profile'onPress ={() => 
                   this.props.navigation.navigate('Profile')}/>
                </View>
            ))}
               </View>
        )
      }
    }

Nithish · Accepted Answer · 2021-02-11 16:40:33Z

You can create a function which takes the data that's being received along with the parameter through which you want to filter the data.

const filterBySpeciality = (data, speciality) => data.filter(d => d.speciality == speciality)

let data = [{speciality: "Ortho", title: "Chief Surgeon"}, {speciality: "Dermatologista", title: "Specialist"}];

console.log(filterBySpeciality(data, "Dermatologista"));

So, in your case you can call filterBySpeciality(data, "Dermatologista") in your render function and use the result for populating the View like below.

const filterBySpeciality = (data, speciality) => data.filter(d => d.speciality == speciality)

render() {
   const filteredData = this.filterBySpeciality(this.state.users, "Dermatologista");
   return(
          <View >
            { this.state.errorMessage && <Text>{ this.state.errorMessage }</Text> }
           {/* Here I have changed this.state.users to filteredData */}
            {filteredData.map(user => (
              <View key={user._id} style={{marginTop: 15, alignItems: 'center'}}>
                <Text>{user.title}</Text>
                <Text>{user.speciality}</Text>
                <Button   title = 'View Profile'onPress ={() => 
                   this.props.navigation.navigate('Profile')}/>
                </View>
            ))}
               </View>
        )

}

Ashish · Accepted Answer · 2021-02-11 11:17:54Z

Just put condition before rendering to data.

getUserList = async () => {
    try {
        const response = await api.get('/auth/list');

        const usersData = response.data
        const users = usersData.filter((user: any) => {
             if (user.speciality === 'Dermatologista') return user;
        })
        console.log(users);
        this.setState({ users });

    } catch (response) {
        this.setState({ errorMessage: response.data.error });
    }
};

componentDidMount() {
    this.getUserList()
}

Or you can try something like this :

render(){
    const usersData = this.state.users
    const users = usersData.filter((user: any) => {
         if (user.speciality === 'Dermatologista') return user;
    })
    console.log(users)
    return(
      <View >
        { this.state.errorMessage && <Text>{ this.state.errorMessage }</Text> }
        {this.state.users.map(user => (
          <View key={user._id} style={{marginTop: 15, alignItems: 'center'}}>
            <Text>{user.title}</Text>
            <Text>{user.speciality}</Text>
            <Button   title = 'View Profile'onPress ={() => 
               this.props.navigation.navigate('Profile')}/>
            </View>
        ))}
           </View>
    )
  }
}

Paulo Avila · Accepted Answer · 2021-02-22 13:53:56Z

0

in the view just this:

     <View >
        { this.state.errorMessage && <Text>{ this.state.errorMessage }</Text> }
        {this.state.users.filter(user => user.speciality === 'Dermatologista').map(user => (
          <View key={user._id} style={{marginTop: 15, alignItems: 'center'}}>
            <Text style={{fontWeight: 'bold', fontSize:20}}>{user.title}</Text>
            <Text>{user.speciality}</Text>
            <Button   title = 'View Profile'onPress ={() => this.props.navigation.navigate('Profile')}/>
       </View>

answered Feb 22, 2021 at 13:53

Paulo Avila

3211 gold badge3 silver badges16 bronze badges

Collectives™ on Stack Overflow

filter elements in a array in async function

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related