【发布时间】：2018-05-31 16:44:18
【问题描述】：
我有以下 JSON 文件。我想根据外键（fk）过滤数据。如果我将参数作为 1 传递给我的页面，那么我希望过滤掉 fk 键为 1 且 id 为 1,2 和 3 的前三行。我希望它们显示为列表视图。
如果我将参数作为 2 传递，那么我希望过滤掉 id 为 4、5 和 6 且 fk 为 2 的行。
fk 参数来自我以前的具有列表视图的页面，如果用户选择特定项目，则该项目 ID 将传递到此页面。
{
"data":[
{
"id": 1,
"fk": 1,
"Loc": "101 Test drive, TX",
"Long": "12365",
"Lat" : "87766",
"Phone": "123-456-7899"
},
{
"id": 2,
"fk": 1,
"Loc": "201 Test drive, CA",
"Long": "12365",
"Lat" : "87766",
"Phone": "123-456-9999"
},
{
"id": 3,
"fk": 1,
"Loc": "201 Test drive, CA",
"Long": "12365",
"Lat" : "87766",
"Phone": "123-456-9999"
},
{
"id": 4,
"fk": 2,
"Loc": "111 Test drive, CA",
"Long": "12365876",
"Lat" : "877669999",
"Phone": "123-456-4040"
},
{
"id": 5,
"fk": 2,
"Loc": "201 Test drive, CA",
"Long": "12365",
"Lat" : "87766",
"Phone": "123-456-9999"
},
{
"id": 6,
"fk": 2,
"Loc": "999 Test drive, CA",
"Long": "12365",
"Lat" : "87766",
"Phone": "123-456-8484"
},
{
"id": 7,
"fk": 3,
"Loc": "888 Test drive, CA",
"Long": "12365432",
"Lat" : "87766111",
"Phone": "123-999-8484"
}
]
}
以下是我的完整代码。我确实在 componentdidMount() 中应用了 data.filter，但现在我得到了一个空列表。我不确定我做错了什么：
import React, { Component } from 'react';
import { StyleSheet, Text, View, ListView, ActivityIndicator, TextInput } from 'react-native';
import { StackNavigator } from 'react-navigation';
class MainActivity extends Component {
constructor(props) {
super(props);
this.state = {
// Default Value of this State.
Loading_Activity_Indicator: true,
text:'',
}
this.arrayholder=[];
}
componentDidMount() {
const data = require('./data.json')
var newList = data.filter(obj => obj.fk === 2)
let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.setState({
Loading_Activity_Indicator: false,
dataSource: ds.cloneWithRows(newList),
}, function() {
// In this block you can do something with new state.
this.arrayholder = newList ;
});
}
SearchFilterFunction(text){
const newData = this.arrayholder.filter(function(item){
const itemData = item.fruit_name.toUpperCase()
const textData = text.toUpperCase()
return itemData.indexOf(textData) > -1
})
this.setState({
dataSource: this.state.dataSource.cloneWithRows(newData),
text: text
})
}
ListViewItemSeparator = () => {
return (
<View
style={{
height: .5,
width: "100%",
backgroundColor: "#000",
}}
/>
);
}
Navigate_To_Second_Activity=(fruit_name)=>
{
//Sending the JSON ListView Selected Item Value On Next Activity.
this.props.navigation.navigate('Second', { JSON_ListView_Clicked_Item: fruit_name });
}
static navigationOptions =
{
title: 'MainActivity',
};
render()
{
if (this.state.Loading_Activity_Indicator) {
return (
<View style={styles.ActivityIndicator_Style}>
<ActivityIndicator size = "large" color="#009688"/>
</View>
);
}
return (
<View style={styles.MainContainer}>
<TextInput
style={styles.TextInputStyleClass}
onChangeText={(text) => this.SearchFilterFunction(text)}
value={this.state.text}
underlineColorAndroid='transparent'
placeholder="Search Here"
/>
<ListView
dataSource={this.state.dataSource}
renderSeparator= {this.ListViewItemSeparator}
renderRow={(rowData) => <Text style={styles.rowViewContainer}
onPress={this.Navigate_To_Second_Activity.bind(this, rowData.Loc)} >{rowData.Loc}</Text>}
/>
</View>
);
}
}
class SecondActivity extends Component
{
static navigationOptions =
{
title: 'SecondActivity',
};
render()
{
return(
<View style = { styles.MainContainer }>
<Text style = { styles.TextStyle }> { this.props.navigation.state.params.JSON_ListView_Clicked_Item } </Text>
</View>
);
}
}
export default MyNewProject = StackNavigator(
{
First: { screen: MainActivity },
Second: { screen: SecondActivity }
});
const styles = StyleSheet.create(
{
MainContainer:
{
justifyContent: 'center',
flex:1,
margin: 10
},
TextStyle:
{
fontSize: 23,
textAlign: 'center',
color: '#000',
},
rowViewContainer:
{
fontSize: 17,
paddingRight: 10,
paddingTop: 10,
paddingBottom: 10,
},
ActivityIndicator_Style:
{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
left: 0,
right: 0,
top: 0,
bottom: 0,
},
TextInputStyleClass:{
textAlign: 'center',
height: 40,
borderWidth: 1,
borderColor: '#009688',
borderRadius: 7 ,
backgroundColor : "#FFFFFF"
}
});
我们将不胜感激。
【问题讨论】：
-
您能分享一下您为此要求所做的努力吗？ :D .. 如果您可以分享您尝试过的代码，那么我们可以提供帮助:)
-
我在上面发布了我的代码
-
也发布你的data.json的内容，如果你的data.json像
{data: [...]}这样，你可能没有过滤数组，那么你应该改为data.data.filter(obj => obj.fk === 2) -
我的整个data.json文件贴在上面
-
diedu 就在那时。您需要使用代码
data.data.filter(obj => obj.fk === 2)而不是data.filter(obj => obj.fk === 2)，并且您可能需要将 data: [] 包装在 {} 中以使其成为对象和 json 兼容。{ data: [] }
标签： reactjs react-native react-android