ReactNative - json 파일 및 데이터 표시 구문 분석

Question

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    Navigator, 
    TouchableOpacity, 
    Image, 
    TouchableHighlight, 
    Alert, 
    TextInput 
} from 'react-native'; 
import Button from 'react-native-button' 
import {Actions} from 'react-native-router-flux' 
import Home from './Home' 

export class Temp extends Component{ 
constructor(props) { 
    super(props); 
    this.state = { 
    data: '', 
    textinput:'', 
    } 
    state={ 
      shouldShow: false 
     } 
} 

    componentDidMount(){ 
    this._onPressButtonGET(); 
    } 

     _onPressButtonPOST(){ 
     fetch("url", { 
      method: "POST", 
      headers: { 
       'Accept': 'application/json', 
       'Content-Type': 'application/json', 
      }, 
      body: JSON.stringify({ 
       "entryDate":"3/2/2017 2:00 AM", 
       "systol": this.state.textinput, 
       "mobileType":"ANDROID", 
       "userName":"menutest", 

       })}) 
     .then((response) => response.json()) 
     .then((responseData) => { 
      Alert.alert(
       "Blood pressure data", 
       "Blood pressure data - " + JSON.stringify(responseData) 
      ) 
     }).catch((error) => { 
     console.error(error); 
     }) 
     .done(); 
    } 

    _onPressButtonGET(){ 
     fetch("url", { 
      method: "POST", 
      headers: { 
       'Accept': 'application/json', 
       'Content-Type': 'application/json', 
      }, 
      body: JSON.stringify({"mobileType":"ANDROID","userName":"menutest"})}) 
     .then((response) => response.json()) 
     .then((responseData) => { 

       this.setState({ data : JSON.stringify(responseData)}) 

      }) .catch((error) => { 
     console.error(error); 
     }) 

     .done(); 
    } 
    render(){ 
     return(

      <View> 
       <TouchableHighlight onPress={this._onPressButtonPOST.bind(this)}> 
        <Text>Add</Text> 
       </TouchableHighlight> 

      <TouchableOpacity style= {{left:300,top:-20, }} 
onPress={()=>{ this.setState({ shouldShow: !this.state.shouldShow })}} 
><Text>Edit</Text></TouchableOpacity> 

{this.state.shouldShow ? <TextInput placeholder='systol' 
      onChangeText={(text) => this.setState({textinput: text})} 
      /> : null} 

       <TouchableHighlight onPress={this._onPressButtonGET.bind(this)}> 
        <Text>show</Text> 
        </TouchableHighlight> 

       <Text>{this.state.data}</Text> 
      </View> 
    ); 
    } 
} 


module.exports = Temp; 

나는 안드로이드 응용 프로그램을 개발 중이므로 json 파일 인 웹 서비스에서 데이터를 가져와야합니다. 나는 모든 것을 얻을 수 있는데, 원시 데이터처럼 보이지만 그 데이터를 파싱하고 단지 몇 가지 내용 만 표시해야합니다.

{ 
"List": [ 
    { 
"entryDate": "03/02/2017", 
"entryDateTime": "03/02/2017 2:00 AM", 
"entryTime": "2:00 AM", 
"systol": "120" 
}, 
    { 
"entryDate": "03/02/2017", 
"entryDateTime": "03/02/2017 2:00 AM", 
"entryTime": "2:00 AM", 
"systol": "121" 
}, 
    { 
"entryDate": "03/02/2017", 
"entryDateTime": "03/02/2017 2:00 AM", 
"entryTime": "2:00 AM", 
"systol": "120" 
}, 
    { 
"entryDate": "03/02/2017", 
"entryDateTime": "03/02/2017 2:00 AM", 
"entryTime": "2:00 AM", 
"systol": "122" 
}, 
    { 
"entryDate": "03/02/2017", 
"entryDateTime": "03/02/2017 2:00 AM", 
"entryTime": "2:00 AM", 
"systol": "123" 
} 
] 
} 

이것은 내 데이터입니다.

은 내가

{"List":[{"entryDate": "03/02/2017","entryDateTime":"03/02/2017 2:00 AM","entryTime": "2:00 AM","systol": "120"},{"entryDate": "03/02/2017", "entryDateTime": "03/02/2017 2:00 AM","entryTime": "2:00 AM","systol": "121" 
},{"entryDate": "03/02/2017","entryDateTime": "03/02/2017 2:00 AM", "entryTime": "2:00 AM","systol": "120"},{"entryDate":"03/02/2017","entryDateTime": "03/02/2017 2:00 AM","entryTime": "2:00 AM","systol": "122"},{"entryDate": 03/02/2017","entryDateTime": "03/02/2017 2:00 AM","entryTime": "2:00 AM", "systol": "123"}]} 

같이 표시 할 수 있어요하지만 난 이런 식으로 만 entryDate를 표시 할 및

entryDate:03/02/2017 
systol:120 
entryDate:03/02/2017 
systol:121 
entryDate:03/02/2017 
systol:122 
entryDate:03/02/2017 
systol:123 

날이 문제를 해결하는 데 도움이 바랍니다 systol. 당신이

Answer 1

당신은 다음과 기능을 렌더링 교체 감사합니다 당신이 필요로하는

render() { 

    const { List: list } = this.state.data 
    const renderList = list && list.map(({entryDate, systol},index) => { 
    return (
     <View key={index}> 
     <Text>{entryDate}</Text> 
     <Text>{systol}</Text> 
     </View> 
    ) 
    }) 
    return (
    <View> 
     <TouchableHighlight onPress={this._onPressButtonPOST.bind(this)}> 
     <Text>Add</Text> 
     </TouchableHighlight> 

     <TouchableOpacity style= {{left:300,top:-20, }} 
      onPress={()=>{ this.setState({ shouldShow: !this.state.shouldShow })}}> 
     <Text>Edit</Text> 
     </TouchableOpacity> 

     {this.state.shouldShow ? <TextInput placeholder='systol' 
     onChangeText={(text) => this.setState({textinput: text})} 
     /> : null} 

     <TouchableHighlight onPress={this._onPressButtonGET.bind(this)}> 
     <Text>show</Text> 
     </TouchableHighlight> 

     {renderList} 

    </View> 
); 

} 

모든 목록을 통해지도와 매핑되고있는 항목에서 entryDate 및 systol을 선택하는 것입니다. 그런 다음 React에게 현재 데이터 항목 (entryDate, systol)에 따라 렌더링해야 할 내용을 지정합니다.