How to display json data on ListView react native by post request api

Question

Here I am trying to fetch data from API post method and trying to populate on listview , and after selecting particular data I'll go to net page. By get method I have done that. But when I am running this code blank list is coming . How can I parse value from groupData.name? After getting data on list I can select particular data and send to other screen ,but for now , how can I populate data in list?

    import React, { Component } from 'react';
    import { View, Text, TextInput,   
    FooterTab,Button,TouchableOpacity, ScrollView,ListView, StyleSheet,
     ActivityIndicator ,Header,icon} from 'react-native';

    import { createStackNavigator } from 'react-navigation';  
    import { SearchBar } from 'react-native-elements';


    const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });

   class RenderList extends Component {
  static navigationOptions = {
    title: 'Selected Item',
    header: null,
  };
  constructor() {
    super();
    this.state = {
      data: null,
      loading: true,
      search: '',
    };
  }

  componentDidMount() {
    this.createViewGroup();
  }

  createViewGroup = async () => {
    try {
      const response = await fetch(
        'http:///Dsenze/userapi/grouphier/viewgroup',
        {
          method: 'POST',
          headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            password: 'admin',
            username: 'admin',
            viewall: 'false',
            id: [4],
            startlimit: '0',
            valuelimit: '10',
          }),
        }
      );

      const responseJson = await response.json();

      const { groupData } = responseJson;

      this.setState({
        data: groupData,
        loading: false,
      });
    } catch (e) {
      console.error(e);
    }
  };

  clickedItemText(clickedItem) {
    this.props.navigation.navigate('Item', { item: clickedItem });
  }
  updateSearch = search => {
    this.setState({ search });
  };
  keyExtractor = ({ id }) => id.toString();
  renderItem = ({ item }) => (
    <TouchableOpacity
      style={styles.item}
      activeOpacity={0.4}
      onPress={() => {
        this.clickedItemText(item);
      }}>
      <Text style={styles.text}>Hospital name {name}</Text>
    </TouchableOpacity>
  );
  render() {
    const { loading, data } = this.state;
    return (
      <ScrollView>
        <View style={styles.container1}>
          {this.state.loading ? (
            <ActivityIndicator size="large" />
          ) : (
            <FlatList
              data={data}
              renderItem={this.renderItem}
              keyExtractor={this.keyExtractor}
            />
          )}
        </View>
      </ScrollView>
    );
  }
}   
    class ClickedItem extends Component
    {

        constructor() {
            super();
            this.state = {
              inputValue: '',
              // Default Value of the TextInput
              // Default value for the QR Code
            };
          }

        static navigationOptions = 
        {
            title: "Selected Item",
            header:  null
        };

        render()
        {

            return(
                <ScrollView>
                <View style = { styles.container2 }>

        <TextInput style={styles.inputBox}
         underlineColorAndroid='rgba(0,0,0,0)'
          placeholder="Hospital Id"
          editable={false}
          placeholderTextColor="#000000"
          onChangeText={(hospital_id) => this.setState({hospital_id})}>{ this.props.navigation.state.params.item.id }</TextInput>

       <TextInput   style={styles.inputBox}
         underlineColorAndroid='rgba(0,0,0,0)'
          placeholder="Field 2"
          secureTextEntry={false}
          placeholderTextColor="#000000"
          onChangeText={(Field2) => this.setState({Field2})}/>

    <TouchableOpacity style={styles.button}onPress={() => {Insert(this.state.hospital_id,this.state.Field2,this.state.Field3,this.state.Field4,this.state.Field5,this.state.Field6);{this.getTextInputValue}}}>
              <Text style={styles.buttonText}>Insert</Text>
          </TouchableOpacity>
                </View>
                </ScrollView>
            );
        }
    }
    export default InvDemoPost = createStackNavigator(
    {
        List: { screen: RenderList,
                 header: true},

        Item: { screen: ClickedItem,
                header: null }
    });


    const styles = StyleSheet.create(
    {
        container1:
        {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center'
        },

        container2:
        {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            paddingHorizontal: 15
        },

        inputBox:{
            width:300,
            borderColor: '#48BBEC',
            backgroundColor: '#F8F8FF',
            borderRadius:25,
            paddingHorizontal:16,
            fontSize:16,
            color:'#000000',
            marginVertical:10, 

        },
        button:{
            width:300,
            backgroundColor:'#4169E1',
            borderRadius:25,
            marginVertical:10,
            paddingVertical:16
        },

        buttonText:{
        fontSize:16,
        fontWeight:'500',
        color:'#ffffff',
        textAlign:'center'

        },

        item:
        {
            padding: 15
        },

        text:
        {
            fontSize: 18
        },

        separator:
        {
            height: 2,
            backgroundColor: 'rgba(0,0,0,0.5)'
        }
    });

Below is the Json data ,that I have to populate on the list view

{
      "groupData": [{
        "hierarchy": 4,
        "id": 4,
        "name": "St.Mary's Hospitals",
        "parent": 3,
        "type": 2
      }, {
        "hierarchy": 4,
        "id": 5,
        "name": "Mandya Clinic",
        "parent": 6,
        "type": 2
      }, {
        "hierarchy": 4,
        "id": 7,
        "name": "Blr Clinic",
        "parent": 3,
        "type": 2
      }, {
        "hierarchy": 4,
        "id": 8,
        "name": "kings hospital",
        "parent": 3,
        "type": 2
      }, {
        "hierarchy": 4,
        "id": 9,
        "name": "jason hospital",
        "parent": 3,
        "type": 1
      }],
      "success": "true"
    }

Do you need to use ListView as it has been deprecated in favour of FlatList? — Andrew
– Andrew, Commented Feb 19, 2019 at 10:51
In this code I am using ListView ,but I'll get solution for FlatList , I'll be more than happy . — Abhigyan Gaurav
– Abhigyan Gaurav, Commented Feb 19, 2019 at 10:56
Hi , could you please look at my code and update in my question? Please — Abhigyan Gaurav
– Abhigyan Gaurav, Commented Feb 19, 2019 at 11:10

Dan · Accepted Answer · 2019-02-19 11:23:40Z

2

I am using the following output:

{
      "groupData": [{
        "hierarchy": 4,
        "id": 4,
        "name": "St.Mary's Hospitals",
        "parent": 3,
        "type": 2
      }, {
        "hierarchy": 4,
        "id": 5,
        "name": "Mandya Clinic",
        "parent": 6,
        "type": 2
      }, {
        "hierarchy": 4,
        "id": 7,
        "name": "Blr Clinic",
        "parent": 3,
        "type": 2
      }, {
        "hierarchy": 4,
        "id": 8,
        "name": "kings hospital",
        "parent": 3,
        "type": 2
      }, {
        "hierarchy": 4,
        "id": 9,
        "name": "jason hospital",
        "parent": 3,
        "type": 1
      }],
      "success": "true"
    }

Assuming this object is assigned to this.state.dataSource

<FlatList
  data={this.state.dataSource.groupData}
  renderItem={({item: { name }) => <Text>{name}</Text>}
  keyExtractor={({id}) => id.toString()}
/>

But, you must remember that you're fetching data in componentDidMount, which is called after the first render. This means that this.state.dataSource will be empty until your API call has succeeded.

You could add an additional state variable isLoading. Then inside your render function you could have some logic to render a Spinner or a List, depending on the status of your API call.

render() {
  const { isLoading, dataSource: { groupData } } = this.state;
  if(isLoading) {
    return <Text>Loading</Text>
  }
  return (
    <FlatList
      data={groupData}
      renderItem={({item: { name }) => <Text>{name}</Text>}
      keyExtractor={({id}) => id.toString()}
    />
  )
}

Then inside of the logic of your API call, where you set dataSource, you can then set isLoading to false.

Updated to reflect code in question

class RenderList extends Component {
  static navigationOptions = {
    title: 'Selected Item',
    header: null,
  };
  constructor() {
    super();
    this.state = {
      data: null,
      loading: true,
      search: '',
    };
  }

  componentDidMount() {
    this.createViewGroup();
  }

  createViewGroup = async () => {
    try {
      const response = await fetch(
        'http:///Dsenze/userapi/grouphier/viewgroup',
        {
          method: 'POST',
          headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            password: 'admin',
            username: 'admin',
            viewall: 'false',
            id: [4],
            startlimit: '0',
            valuelimit: '10',
          }),
        }
      );

      const responseJson = await response.json();

      const { groupData } = responseJson;

      this.setState({
        data: groupData,
        loading: false,
      });
    } catch (e) {
      console.error(e);
    }
  };

  clickedItemText(clickedItem) {
    this.props.navigation.navigate('Item', { item: clickedItem });
  }
  updateSearch = search => {
    this.setState({ search });
  };
  keyExtractor = ({ id }) => id.toString();
  renderItem = ({ item }) => (
    <TouchableOpacity
      style={styles.item}
      activeOpacity={0.4}
      onPress={() => {
        this.clickedItemText(item);
      }}>
      <Text style={styles.text}>Hospital name {name}</Text>
    </TouchableOpacity>
  );
  render() {
    const { loading, data } = this.state;
    return (
      <ScrollView>
        <View style={styles.container1}>
          {this.state.loading ? (
            <ActivityIndicator size="large" />
          ) : (
            <FlatList
              data={data}
              renderItem={this.renderItem}
              keyExtractor={this.keyExtractor}
            />
          )}
        </View>
      </ScrollView>
    );
  }
}

edited Feb 19, 2019 at 11:23

answered Feb 19, 2019 at 11:01

Dan

8,9229 gold badges46 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Abhigyan Gaurav Over a year ago

One more thing , I am doing correct approach for api call ? Post method ? and one more request , could you pleas update in my question ? Please

Abhigyan Gaurav Over a year ago

Thanks Dan, thanx a lot for your time , let me try this

Abhigyan Gaurav Over a year ago

in json value there is name , I have to print that next to "Hospital name'

Abhigyan Gaurav Over a year ago

Updated the question

Abhigyan Gaurav Over a year ago

Solved .. Thanks a lot :)

|

Collectives™ on Stack Overflow

How to display json data on ListView react native by post request api

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related