[英]Fetch data by a condition react native node js
Im trying to fetch some specific data from my database, To be more specific and clear here is an exemple: i have clients in my database, and here is how their documents looks like:我试图从我的数据库中获取一些特定的数据,为了更具体和清楚这里是一个例子:我的数据库中有客户,他们的文档如下所示:
Client 1:客户 1:
_id:xxx _id:xxx
name:abc名称:abc
credit:100信用:100
Client 2:客户 2:
_id:yyy _id:yyy
name:abcde名称:abcde
credit:0信用:0
i want to display the data of the clients who have an credit > 0 in a flatlist我想在平面列表中显示信用 > 0 的客户的数据
i already have an flatlist which displays all data and it works fine, i hope i was clear, thanks!我已经有一个显示所有数据的平面列表,它工作正常,我希望我很清楚,谢谢!
Im using react native-nodejs我正在使用 react native-nodejs
class Listtest extends React.Component{
constructor() {
super();
this.delayValue = 8000;
this.state = {
animatedValue: new Animated.Value(0),
search:'',
refreshing: true,
dataSource: [],
isLoading:true
}
}
onPresss = (item) => {
const Designation = item.Designation;
const Marque = item.Marque;
const PrixAchat = item.PrixAchat;
const PrixVente = item.PrixVente;
const MaxRemise = item.MaxRemise;
const QuantiteAlerte = item.QuantiteAlerte;
const QuantiteArticle = item.QuantiteArticle;
const Id_fournisseur = item.Id_fournisseur;
}
renderItem = ({item}) => {
this.delayValue = this.delayValue + 500;
const translateX = this.state.animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [this.delayValue,1]
});
return(
<Animated.View
style={[styles.button, { transform: [{ translateX }] }]}>
<View style={{flex:1}}>
<TouchableOpacity
onPress={()=>this.onPresino(item)}>
<View style={{flexDirection:'row',padding:10}}>
<Avatar.Image
source={{uri:'https://i.ibb.co/xDJ6XBd/Articleimage.jpg'}}
size={50}/>
<Text style=
{{marginVertical:10,marginLeft:20,letterSpacing:1.7,fontWeight:'bold',fontSize:20,marginLeft:8}}>
{item.Designation}</Text>
</View>
</TouchableOpacity>
</View>
</Animated.View>
)
}
renderSeparator =() => {
return(
<View
style={{height:1,width:'100%',backgroundColor:'#ccc'}}>
</View>
)
}
async componentDidMount() {
Animated.spring(this.state.animatedValue, {
toValue: 1,
tension: 20,
useNativeDriver: true
}).start();
await fetch ('http://localhost:8080/api/articles',{
method:'get',
mode:'no-cors',
headers:{
'Accept':'application/json',
'Content-Type':'application/json'
},
})
.then((response) => response.json())
.then((responseJson) => {
this.setState({
dataSource:responseJson
})
})
.catch((error) =>{
console.log(error)
}
)}
render(){
return (
<View style={styles.container}>
<SearchBar
placeholder="Tapez ici..."
onChangeText={search => { this.setState({ search }) }}
value={this.state.search}
style={styles.search}
round="default"
lightTheme="default"
/>
<FlatList
pagingEnabled
data={this.state.dataSource}
renderItem={this.renderItem}
keyExtractor={(item, index) => index}
ItemSeparatorComponent={this.renderSeparator}
/>
</View>
)}}
const styles=StyleSheet.create({
container: {
height: 300,
flex:1,
backgroundColor: '#FFF',
borderRadius: 6,
},
});
export default Listtest;
You can simply use Array.prototype.filter()
.您可以简单地使用
Array.prototype.filter()
。
<FlatList
pagingEnabled
data={this.state.dataSource.filter((value)=> value.credit > 0 )}
renderItem={this.renderItem}
keyExtractor={(item, index) => index}
ItemSeparatorComponent={this.renderSeparator}
/>
you can change 0
with a state value to have more control over it.您可以使用 state 值更改
0
以对其进行更多控制。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.