Reputation: 231
Hi I need help as to how do i get a specific value from an array in a web service i am using fetch method to get the data.It is in XML i am using a dependency to convert xml data to JSON.
import React from "react";
import {StyleSheet,View,ActivityIndicator,FlatList,Text,TouchableOpacity} from "react-native";
export default class Source extends React.Component {
static navigationOptions = ({ navigation }) => {
return {
title: "Source Listing",
headerStyle: {backgroundColor: "#fff"},
headerTitleStyle: {textAlign: "center",flex: 1}
};
};
constructor(props) {
super(props);
this.state = {
loading: false,
items:[]
};
}
FlatListItemSeparator = () => {
return (
<View style={{
height: .5,
width:"100%",
backgroundColor:"rgba(0,0,0,0.5)",
}}
/>
);
}
renderItem=(data)=>
<TouchableOpacity style={styles.list}>
<Text style={styles.lightText}>{data.item.name}</Text>
<Text style={styles.lightText}>{data.item.email}</Text>
<Text style={styles.lightText}>{data.item.company.name}</Text>
</TouchableOpacity>
render(){
{
if(this.state.loading){
return(
<View style={styles.loader}>
<ActivityIndicator size="large" color="#0c9"/>
</View>
)}}
return(
<View style={styles.container}>
<FlatList
data= {this.state.dataSource}
ItemSeparatorComponent = {this.FlatListItemSeparator}
renderItem= {item=> this.renderItem(item)}
keyExtractor= {item=>item.id.toString()}
/>
</View>
)}
}
const parseString = require('react-native-xml2js').parseString;
fetch('http://192.168.200.133/apptak_service/apptak.asmx/Get_Item_Master')
.then(response => response.text())
.then((response) => {
parseString(response, function (err, result) {
console.log(response)
});
}).catch((err) => {
console.log('fetch', err)
this.fetchdata();
})
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff"
},
loader:{
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#fff"
},
list:{
paddingVertical: 4,
margin: 5,
backgroundColor: "#fff"
}
});
I am pretty new to react native and development in general i would highly apprecitate any help .I need to seprate the elements and display specific elements in the app.
Upvotes: 1
Views: 78
Reputation: 645
As far as I can tell from your code, you are not passing the fetched data into your state. You're only logging it in the console:
parseString(response, function (err, result) {
console.log(response)
});
I think you should add the following pieces to your component:
1 . First of all set up the function to be called in your constructor, so it can access the state:
constructor(props) {
super(props);
this.state = {
loading: false,
items:[]
};
this.fetchRequest = this.fetchRequest.bind(this)
}
Create the actual function inside render
:
fetchRequest() {
fetch('http://192.168.200.133/apptak_service/apptak.asmx/Get_Item_Master')
.then(response => response.text())
.then((response) => {
parseString(response, function (err, result) {
this.setState({ items: response });
});
}).catch((err) => {
console.log('fetch', err)
})
}
You need to call the fetchRequest
function. You can do that in a lifecycle method of your component:
componentDidMount() {
fetchRequest();
}
Last thing is to create your Flatlist
correctly:
<FlatList
data= {this.state.items}
renderItem={({ item }) => <Item title={item.title} />}
keyExtractor= {item=>item.id.toString()}
/>
Your data source is this.state.items
, and not this.state.dataSource
.
Unfortunately I have no idea what your data looks like, so I don't know how the keyExtractor
and <Item>
should be written. What I can tell you is that you will need unique IDs for your items.
You can read more about Flatlist
in the React Native docs.
Upvotes: 1