2017-03-14 38 views
0
 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: '', 
      data1:'', 
      textinput:'', 
      entryDate:[] 

      } 
      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) => { 
        Alert.alert('problem while adding data'); 
       }) 
       .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) }) 
data["list"].map(d => this.state.entryDate.push(d.entryDate)); 


         this.setState({ entryDate: jsonResponse.entryDate, systol: responseData.systol }) 


        }).catch((error) => { 
        Alert.alert('problem while getting data'); 
       }) 
       .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> 
this.state.entryDate.map(d => (<Text>{d}</Text>)); 
          <Text>{this.state.entryDate}</Text> //not displaying anythong 
         <Text>{this.state.data && JSON.parse(this.state.data)['entryDate']}</Text> //not displaying anything 
         <Text>hello{this.state.data}</Text> //printing all data 
        </View> 
      ); 
      } 
     } 


     module.exports = Temp; 

我想分析我的JSON文件,并在屏幕上显示的一些数据,但我可以在上面的代码来显示所有的数据,但我想disaply仅entryDate和sysol。是否可以在_onPressButtonGET()函数中使用for循环并仅在那里显示数据?谢谢。在解析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": "120" 
}, 
    { 
"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": "120" 
}, 
    { 
"entryDate": "03/02/2017", 
"entryDateTime": "03/02/2017 2:00 AM", 
"entryTime": "2:00 AM", 
"systol": "120" 
} 
] 
} 

我的JSON看起来像这样。

+0

变化数据的所有数据[ “列表”]到数据[“列表”] –

+0

sti会有同样的错误。 – Prasanna

+0

使用 {this.state.entryDate.map(d =>( {d}))} –

回答

1

第一初始化entryData作为阵列

this.state = { 
    entryDate: [], 
} 
在_onPressButtonGET

()的使用

data["List"].map(d => this.state.entryData.push(d.entryDate)); 
在渲染使用地图

显示像

this.state.entryDate.map(d => (<Text>{d}</Text>)); 
+0

你的意思是entryDate? – Prasanna

+0

对不起yup entryDate –

+0

像找不到变量的错误:d。此错误在渲染 – Prasanna

1
onPressButtonGET(){ 
       fetch(url, { 
        method: "POST", 
        headers: { 
         'Accept': 'application/json', 
         'Content-Type': 'application/json', 
        }, 
        body: JSON.stringify({"mobileType":"ANDROID","userName":"menutest"})}) 
    } 
     .then(response => { 
      this.setState({entryDate:response.data}) 
     }); 


renderEntryDate() { 
    this.state.entryDate.map((item)=>{ 
     <Text>{item.entryDate}</Text> 
    }) 
    } 

render() { 
    return (
     <View> 
     <Button style= {{ 
        backgroundColor: '#6656B4', 
        width: 200, 
        height: 40, 
       } 
       onPress={() => this.onPressButtonGET()} 
       title="Get Weather" 
       color="#841584" 
     /> 
     {this.renderEntryDate()} 
     <View> 
    ); 
}