React-Native: Display JSON Data in ListView - json

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',
}
});'