React-Native: Display JSON Data in ListView

Question

I want to display JSON-Data in a ListView. The Problem is, that the JSON data contains Dictionaries. In one Row I would like to display 'Gattung', 'ab' and 'bis'. I am not able to display following JSON-Data in a ListView:

[
{
    "Gattung": "ICE",
    "Zugummer": 26,
    "ab": "Regensburg Hbf",
    "bis": "Hanau Hbf",
    "Wochentag": "Fr",
    "Zeitraum": ""
},
{
    "Gattung": "ICE",
    "Zugummer": 27,
    "ab": "Frankfurt(Main)Hbf",
    "bis": "Regensburg Hbf",
    "Wochentag": "So",
    "Zeitraum": ""
},
{
    "Gattung": "ICE",
    "Zugummer": 28,
    "ab": "Regensburg Hbf",
    "bis": "Würzburg Hbf",
    "Wochentag": "Fr",
    "Zeitraum": ""
},
{
    "Gattung": "ICE",
    "Zugummer": 35,
    "ab": "Hamburg Hbf",
    "bis": "Puttgarden",
    "Wochentag": "tgl.",
    "Zeitraum": "25.06. - 04.09."
},
{
    "Gattung": "ICE",
    "Zugummer": 36,
    "ab": "Puttgarden",
    "bis": "Hamburg Hbf",
    "Wochentag": "tgl.",
    "Zeitraum": "25.06. - 04.09."
}
]

This is my code now:

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


var MainView = React.createClass ({





  getInitialState() {

     return {

        jsonURL: 'http://demo.morgenrot-wolf.de/qubidu/test.json',
        dataSource: ds.cloneWithRows(['row 1', 'row 2']),
     }
   },



   componentDidMount(){

      this.loadJSONData();

   },



   loadJSONData() {

     fetch(this.state.jsonURL, {method: "GET"})
     .then((response) => response.json())
     .then((responseData) =>
     {
          for (var i = 0; i < responseData.length; i++)
          {


              this.setState({ dataSource: this.state.dataSource.cloneWithRows(responseData[i]) });
          }

     })
     .done(() => {


     });


   },




  render() {
    return (

      <View style={styles.container}>

         <ListView
              dataSource={this.state.dataSource}
              renderRow={(rowData) => <Text>{rowData}</Text>}
            />
      </View>

    );
  }
});

Answer 1

rowData is an object, so renderRow property of your list should look something like

renderRow: function(rowData) {
  return (
    <View style={styles.row}>
      <Text>{rowData.Gattung}</Text>
      <Text>{rowData.ab}</Text>
      <Text>{rowData.bis}</Text>
    </View>
  );
}

Also it is bad idea to call setState inside a loop. If reponseData is an array, this.setState({ dataSource: this.state.dataSource.cloneWithRows(responseData)}); should be enough.

Check this sample: https://rnplay.org/apps/4qH1HA

Answer 2

  //returning the main view after data loaded successfully
  return (

    <View style={styles.MainContainer}>

      <ListView

        dataSource={this.state.dataSource}

        renderSeparator= {this.ListViewItemSeparator}

        renderRow={(rowData) =>

       <View style={{flex:1, flexDirection: 'column'}} >

         <TouchableOpacity onPress={this.GetItem.bind(this, rowData.student_name,rowData.student_subject)} >

         <Text style={styles.textViewContainer} >{rowData.id}</Text>

         <Text style={styles.textViewContainer} >{rowData.student_name}</Text>

         <Text style={styles.textViewContainer} >{rowData.student_phone_number}</Text>

         <Text style={styles.textViewContainer} >{rowData.student_subject}</Text>

         </TouchableOpacity>

       </View>

        }
      />

    </View>
  );
}
}

} const styles = StyleSheet.create({

MainContainer :{
 // Setting up View inside content in Vertically center.
justifyContent: 'center',
flex:1,
paddingTop: (Platform.OS === 'ios') ? 20 : 0,
backgroundColor: '#ffffff',
padding: 5, 
},   
textViewContainer: {
 textAlignVertical:'center', 
 fontSize: 15,
 color: '#1c1c1c',
 } 
});'