Extraire des données à partir de JSON liste de Réagir natif
Je veux analyser un fichier JSON et l'affichage des données sur l'écran. Je suis en mesure d'afficher toutes les données en utilisant le code suivant, mais je veux afficher seulement entryDate
et sysol
. Est-il possible d'utiliser une boucle for dans _onPressButtonGET()
et d'afficher des données-il seulement?
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:
{
"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"
}
]
}
- changement de données["liste"] données["Liste"]
- toujours la même erreur.
- utiliser { ce.état.entryDate.carte d => (<Texte>{d}</Texte>)) }
- maintenant, pas d'erreur, mais le contrôle va .catch(erreur).. bloc
- c'est donc un problème avec votre appel d'api , vérifier votre demande et de votre serveur.
- c'.setState({ data : les données JSON.stringify(responseData) }) cette ligne de travail. {ce.état.données} ici, je suis en mesure de récupérer toutes les données.
- data["liste"].carte d => ce.état.entryDate.push(d.entryDate)); doit être présent.état.data["Liste"].carte d => ce.état.entryDate.push(d.entryDate));
- nope. le contrôle va attraper bloc seulement.
- c'.setState({ entryDate: jsonResponse.entryDate, systol: responseData.systol }) quelque chose n'est pas possible comme ça?
Vous devez vous connecter pour publier un commentaire.
d'abord l'initialiser entryData en tant que tableau
dans _onPressButtonGET() utiliser
en rendre l'utilisation de la carte pour afficher toutes les données comme ça