У меня есть следующий файл JSON.Я хочу фильтровать данные на основе внешнего ключа (FK).Если у меня есть параметр, переданный на мою страницу как 1, тогда я хочу отфильтровать первые три строки с ключом fk, равным 1, и идентификатором 1,2 и 3.Я хочу, чтобы они отображались в виде списка.
То же самое, если у меня есть параметр, переданный как 2, тогда я хочу, чтобы строки с id 4, 5 и 6 и fk 2 отфильтровывались.
Параметр fk исходит измоя предыдущая страница, которая имеет вид списка, и если пользователь выбирает определенный элемент, то этот идентификатор элемента передается на эту страницу.
{
"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"
}
]
}
Ниже приведен весь мой код.Я применил data.filter в componentdidMount (), но теперь я получаю пустой список.Я не уверен, что я делаю неправильно:
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"
}
});
Любая помощь будет высоко оценена.