반응 네이티브에서 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 고마워. 그 일, 너는 내 하루를 구했다. –

하는 것은 목록보기를

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

표시 데이터 I이 당신을 도움이되기를 바랍니다

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

만들기 다른 변수

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

에게 추가 가져 오는 동안. 테스트는 아니지만 이와 같이 작동해야합니다.

출처

2017-10-12 05:53:41 user5091906

감사합니다. –

반응 네이티브에서 JSON 배열을 반복합니다.

답변

관련 문제