Rishail Siddiqui
Rishail Siddiqui

Reputation: 231

How do i get a specific value from an array-React Native

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

Answers (1)

p-syche
p-syche

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)
}
  1. 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)
        })
      }
    
  2. You need to call the fetchRequest function. You can do that in a lifecycle method of your component:

    componentDidMount() {
      fetchRequest();
    }
    
  3. 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

Related Questions