React Native - 解析 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;

我正在开发一个 android 应用程序，我需要从 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 和 systol

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

请帮我解决这个问题。谢谢

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。然后根据当前数据项(entryDate, systol)告诉React需要渲染什么。

React Native - 解析 json 文件并显示数据

ReactNative - Parsing json file and display data

parsing

json

fetch

react-native