web-dev-qa-db-fra.com

React-Native: Afficher les données JSON dans ListView

Je veux afficher des données JSON dans un ListView. Le problème est que les données JSON contiennent des dictionnaires. Dans une rangée, j'aimerais afficher «Gattung», «ab» et «bis». Je ne parviens pas à afficher les données JSON suivantes dans un 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."
}
]

Ceci est mon code maintenant:

 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>

    );
  }
});
jsonlistviewdownloadreact-native
4
profidash_98

rowData est un objet, la propriété renderRow de votre liste devrait donc ressembler à

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

De plus, c'est une mauvaise idée d'appeler setState à l'intérieur d'une boucle. Si reponseData est un tableau, this.setState({ dataSource: this.state.dataSource.cloneWithRows(responseData)}); devrait suffire.

Vérifiez cet exemple: https://rnplay.org/apps/4qH1HA

10
Konstantin Kuznetsov
  //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',
 } 
});'
0
uttam kumar sharma