在反应原生中迭代JSON

Question

我遇到了在原生反应中工作的问题。我已经解析了一个大的JSON对象，并且需要遍历嵌套在它内部的数组。我需要做的就是在每个项目对象的日期[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": "cburecreationcenter@gmail.com", 
      "displayName": "Cbu RecreationCenter", 
      "self": true 
      }, 
      "organizer": { 
      "email": "cburecreationcenter@gmail.com", 
      "displayName": "Cbu RecreationCenter", 
      "self": true 
      }, 
      "start": { 
      "dateTime": "2017-03-06T15:30:00-08:00" 
      }, 
      "end": { 
      "dateTime": "2017-03-06T16:30:00-08:00" 
      }, 
      "iCalUID": "fhq5hof67nvqhj85qm65t1n3e4@google.com", 
      "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": "cburecreationcenter@gmail.com", 
      "displayName": "Cbu RecreationCenter" 
      }, 
      "organizer": { 
      "email": "km5r3grqmjn6b1461i6ipc22as@group.calendar.google.com", 
      "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": "4tnn4gn0gstndi5idrqjsg7elo@google.com", 
      "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": "cburecreationcenter@gmail.com", 
      "displayName": "Cbu RecreationCenter" 
      }, 
      "organizer": { 
      "email": "km5r3grqmjn6b1461i6ipc22as@group.calendar.google.com", 
      "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": "m533eg9bu5o4meinuu7pvfoge4@google.com", 
      "sequence": 0, 
      "reminders": { 
      "useDefault": true 
      }, 
      "type": "class" 
     }, 

Answer 1

您可以使用.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>块