反応ネイティブでJSON配列を反復処理する

私は反応ネイティブでの作業に遭遇しました。私はJSONオブジェクトを解析し、その中にネストされた配列を反復処理する必要があります。すべてのprofilesオブジェクトをリストに入れたいです。反応ネイティブでJSON配列を反復処理する

私は以下のコードを試してみましたが、プロファイルオブジェクトを取得していません。リスト内のすべてのプロファイルオブジェクトを表示するには？

コード：

import React, { Component } from 'react'; 
import { AppRegistry, StyleSheet, Modal, Image, Platform } from 'react-native'; 
import { Spinner, Text, View, Content, Container,Item,Header,Body, Title, Button, Icon, InputGroup, Input, ListItem, List, Radio, CheckBox, Thumbnail, Card, CardItem, H3 } from 'native-base'; 

class Profile extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      radio1 : true, 
      check1: false, 
      modalVisible: false, 
      search: 'nativebase', 
      selectedItem: undefined, 
      results: { 
       items: [] 
      } 
     } 
    } 

    setModalVisible(visible, x) { 
     this.setState({ 
      modalVisible: visible, 
      selectedItem: x 
     }); 
    } 

    toggleCheck() { 
     this.setState({ 
      check1 : !this.state.check1 
     }) 
    } 
    componentDidMount() { 

     var that = this; 
     this.search(); 

    } 

    search() { 
     // Set loading to true when the search starts to display a Spinner 
     this.setState({ 
      loading: true 
     }); 

     var that = this; 
     return fetch('https://mysite.in/api/profilematch/25/') 
      .then((response) => response.json()) 
      .then((responseJson) => { 
       // Store the results in the state variable results and set loading to 
       // false to remove the spinner and display the list of repositories 
       that.setState({ 
        results: responseJson, 
        loading: false 
       }); 

       return responseJson; 
      }) 
      .catch((error) => { 

       that.setState({ 
        loading: false 
       }); 

       console.error(error); 
     }); 
    } 

    render() { 

     var that = this; 
     return (
      <Container> 
       <Content> 
       <List> 
        {this.state.loading? <Spinner /> : <List dataArray={this.state.results} renderRow={(results) => 
           <ListItem button onPress={()=>this.setModalVisible(true, item)} > 
            <Thumbnail square size={80} source={{uri: results.avatar_url}} /> 
            <Text>Name: <Text style={{fontWeight: '600', color: '#46ee4b'}}>{results}</Text></Text> 
            <Body> 
            <Text>{results.sur_name}</Text> 

            </Body> 
           </ListItem> 
          } />} 
       </List> 
      </Content> 
      </Container> 
     ); 
    } 
} 
const styles = StyleSheet.create({ 
    header : { 
     marginLeft: -5, 
     marginTop: 5, 
     marginBottom: (Platform.OS==='ios') ? -7 : 0, 
     lineHeight: 24, 
     color: '#5357b6' 
    }, 
    modalImage: { 
     resizeMode: 'contain', 
     height: 200 
    }, 
    bold: { 
     fontWeight: '600' 
    }, 
    negativeMargin: { 
     marginBottom: -10 
    } 
}); 

module.exports = Profile;

JSON：

[ 
    { 
     "id": 4, 
     "profiles": [ 
      { 
       "id": 18, 
       "first_name": "sweta", 
       "is_active": true 

      }, 
      { 
       "id": 20, 
       "first_name": "Hiteshi", 
       "is_active": true 
      }, 
      { 
       "id": 3, 
       "first_name": "Sneha", 
       "is_active": true 
      } 
     ], 
     "user": 25 
    } 
]

私がやりたいすべてがリストにprofilesオブジェクトを印刷することです。

出典

2017-10-12 Anonymous

'responseJson [0] .profiles'は反復したい配列です - 結果はおそらく' results：responseJson [0] .profiles'ですか？ –

@ JaromandaXありがとう。その仕事、あなたは私の日を救った。 –

私はこれがあなたの役に立てば幸いリストビューのデータに

renderRow(rowData) { 
    return (<Text>{rowData.first_name}</Text>); 
}

を表示

<ListView dataSource={this.state.profiles} renderRow={this.renderRow.bind(this)} />

を作成

that.setState({ 
    //assuming profiles exist 
    profiles: responseJson[0].profiles, 
});

別の変数を追加フェッチ中。テストされていませんが、このように動作するはずです。

出典

2017-10-12 05:53:41 user5091906

ありがとうございました。 –

反応ネイティブでJSON配列を反復処理する

答えて

関連する問題