在React Native中遍历JSON [英] iterate over JSON in react native

问题描述

我遇到了在本机反应中工作的问题.我已经解析了一个大型JSON对象，并且需要遍历嵌套在其中的数组.我要做的就是在第[0]天的每个项目对象中打印三个值.

I've come across a problem working in react native. I've parsed a large JSON object and need to iterate over an array nested inside it. All I need to do is print three values in each item object for day[0].

我的代码:

import React, { Component, PropTypes } from 'react';
import { View, Text, ListView, StyleSheet, TouchableHighlight} from 'react-native';
import Header from '../Components/Header';
import Api from '../Utility/Api';


export default class CalendarPage extends Component {

constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(
        fetch('https://s3.amazonaws.com/cbu-rec-center-app/credentials/schedule.json')
      )
    };
  }
    componentWillMount(){
        Api.getDates().then((res) => {
            this.setState({
                    //I need to have these three output, but for all items in day[0]
                   EventName: res.days[0].items[0].summary,
                   EventDate: res.days[0].items[0].start.dateTime,
                   EventLocation: res.days[0].items[0].description
            })
        })
    }

      render() {
        return (
          <View style={{flex: 1}}>
            <Header pageName="Calendar" navigator={this.props.navigator}/>
            <View style = {{flex:9}}>
                <Text> {this.state.EventName} </Text>
                <Text> {this.state.EventDate} </Text>
                <Text> {this.state.EventLocation} </Text>
             </View>
          </View>
        );
      }
}

JSON

"days": [{
    "date": "2017-03-06",
    "hours": {
      "open": "06:00",
      "close": "12:00"
    },
    "items": [{
          "kind": "calendar#event",
          "etag": "\"2977101842476000\"",
          "id": "fhq5hof67nvqhj85qm65t1n3e4",
          "status": "confirmed",
          "htmlLink": "https://www.google.com/calendar/event?eid=ZmhxNWhvZjY3bnZxaGo4NXFtNjV0MW4zZTQgY2J1cmVjcmVhdGlvbmNlbnRlckBt",
          "created": "2017-03-03T14:22:01.000Z",
          "updated": "2017-03-03T14:22:01.238Z",
          "summary": "Women's Volleyball",
          "description": "West Court",
          "creator": {
            "email": "[e-mail]",
            "displayName": "Cbu RecreationCenter",
            "self": true
          },
          "organizer": {
            "email": "[e-mail]",
            "displayName": "Cbu RecreationCenter",
            "self": true
          },
          "start": {
            "dateTime": "2017-03-06T15:30:00-08:00"
          },
          "end": {
            "dateTime": "2017-03-06T16:30:00-08:00"
          },
          "iCalUID": "[e-mail]",
          "sequence": 0,
          "reminders": {
            "useDefault": true
          },
          "type": "event"
        },
        {
          "kind": "calendar#event",
          "etag": "\"2976616094232000\"",
          "id": "4tnn4gn0gstndi5idrqjsg7elo_20170306T200000Z",
          "status": "confirmed",
          "htmlLink": "https://www.google.com/calendar/event?eid=NHRubjRnbjBnc3RuZGk1aWRycWpzZzdlbG9fMjAxNzAzMDZUMjAwMDAwWiBrbTVyM2dycW1qbjZiMTQ2MWk2aXBjMjJhc0Bn",
          "created": "2017-02-28T14:24:06.000Z",
          "updated": "2017-02-28T18:54:07.116Z",
          "summary": "Boxing Boot Camp",
          "creator": {
            "email": "[e-mail]",
            "displayName": "Cbu RecreationCenter"
          },
          "organizer": {
            "email": "[e-mail]",
            "displayName": "Group X Calendar",
            "self": true
          },
          "start": {
            "dateTime": "2017-03-06T12:00:00-08:00"
          },
          "end": {
            "dateTime": "2017-03-06T12:45:00-08:00"
          },
          "recurringEventId": "4tnn4gn0gstndi5idrqjsg7elo",
          "originalStartTime": {
            "dateTime": "2017-03-06T12:00:00-08:00"
          },
          "iCalUID": "[e-mail]",
          "sequence": 0,
          "reminders": {
            "useDefault": true
          },
          "type": "class"
        },
        {
          "kind": "calendar#event",
          "etag": "\"2967485504076000\"",
          "id": "m533eg9bu5o4meinuu7pvfoge4_20170306T210000Z",
          "status": "confirmed",
          "htmlLink": "https://www.google.com/calendar/event?eid=bTUzM2VnOWJ1NW80bWVpbnV1N3B2Zm9nZTRfMjAxNzAzMDZUMjEwMDAwWiBrbTVyM2dycW1qbjZiMTQ2MWk2aXBjMjJhc0Bn",
          "created": "2017-01-06T22:45:52.000Z",
          "updated": "2017-01-06T22:45:52.038Z",
          "summary": "Women on Weights",
          "description": "This is a weight lifting class designed to empower women to lift free weights in a group setting . The goals of WOW are to teach proper form, assist women in improving their posture, increasing their strength, and muscle pairing. ",
          "location": "Group X Room",
          "creator": {
            "email": "[e-mail]",
            "displayName": "Cbu RecreationCenter"
          },
          "organizer": {
            "email": "[e-mail]",
            "displayName": "Group X Calendar",
            "self": true
          },
          "start": {
            "dateTime": "2017-03-06T13:00:00-08:00",
            "timeZone": "America/Los_Angeles"
          },
          "end": {
            "dateTime": "2017-03-06T14:00:00-08:00",
            "timeZone": "America/Los_Angeles"
          },
          "recurringEventId": "m533eg9bu5o4meinuu7pvfoge4",
          "originalStartTime": {
            "dateTime": "2017-03-06T13:00:00-08:00",
            "timeZone": "America/Los_Angeles"
          },
          "iCalUID": "[e-mail]",
          "sequence": 0,
          "reminders": {
            "useDefault": true
          },
          "type": "class"
        },

推荐答案

您可以使用.map()进行操作:

<View>
  { res.days[0].items.map((item) => (
    <View>
      <Text>{item.summary}</Text>
      <Text>{item.start.dateTime}</Text>
      <Text>{item.description}</Text>
    </View>
  ))}
</View>

确保检查数据可用性，以不显示空的<Text>块

make sure to check for data availability not to display empty <Text> blocks

这篇关于在React Native中遍历JSON的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！