React-Native: отображение данных JSON в ListView

Question

Я хочу отображать JSON-Data в ListView. Проблема заключается в том, что данные JSON содержат словари. В одной строке я хотел бы показать «Gattung», «ab» и «bis». Я не в состоянии отобразить следующие JSON-данных в 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." 
} 
] 

Это мой код прямо сейчас:

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 является объектом, поэтому renderRow свойство вашего списка должен выглядеть примерно так

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

Также неплохо позвонить в setState внутри цикла. Если reponseData является массивом, должно быть достаточно this.setState({ dataSource: this.state.dataSource.cloneWithRows(responseData)});.

Проверить этот пример: https://rnplay.org/apps/4qH1HA