Как получить доступ к вложенным объектам внутри данных Nested Array JSON на экране в React-Native

Question

У меня есть массив объектов Data, которые содержат другой массив Attendance, и я просто хочу получить доступ ко всем данным за 30 дней из массива посещаемости. Я пытаюсь получить данные о дате, chechIn, checkOut и totalHoure за 30 дней из массива посещаемости Вот мои JSON данные API. Пожалуйста, проверьте мой код тоже.

 {
"message": "30 day data",
"data": [
    {
        "id": 2,
        "addEmployee": {
            "firstName": "Mohd"
        },
        "attendances": [
            {
                "id": 111,
                "checkIn": "2020-03-24T06:01:26.000Z",
                "checkOut": null,
                "totalHours": null,
                "date": "2020-03-24",
                "status": "present",
                "createdAt": "2020-03-24T06:01:26.000Z",
                "updatedAt": "2020-03-24T06:01:26.000Z",
                "userId": 2
            },
            {
                "id": 132,
                "checkIn": null,
                "checkOut": null,
                "totalHours": "0",
                "date": "2020-03-25",
                "status": "absent",
                "createdAt": "2020-03-25T13:00:00.000Z",
                "updatedAt": "2020-03-25T13:00:00.000Z",
                "userId": 2
            },
            {
                "id": 152,
                "checkIn": null,
                "checkOut": null,
                "totalHours": "0",
                "date": "2020-03-26",
                "status": "absent",
                "createdAt": "2020-03-26T13:00:00.000Z",
                "updatedAt": "2020-03-26T13:00:00.000Z",
                "userId": 2
            },
            {
                "id": 173,
                "checkIn": null,
                "checkOut": null,
                "totalHours": "0",
                "date": "2020-03-27",
                "status": "absent",
                "createdAt": "2020-03-27T13:00:00.000Z",
                "updatedAt": "2020-03-27T13:00:00.000Z",
                "userId": 2
            },
            {
                "id": 193,
                "checkIn": null,
                "checkOut": null,
                "totalHours": "0",
                "date": "2020-03-30",
                "status": "absent",
                "createdAt": "2020-03-30T13:00:00.000Z",
                "updatedAt": "2020-03-30T13:00:00.000Z",
                "userId": 2
            },
            {
                "id": 216,
                "checkIn": null,
                "checkOut": null,
                "totalHours": "0",
                "date": "2020-03-31",
                "status": "absent",
                "createdAt": "2020-03-31T13:00:00.000Z",
                "updatedAt": "2020-03-31T13:00:00.000Z",
                "userId": 2
            },
            {
                "id": 338,
                "checkIn": null,
                "checkOut": null,
                "totalHours": "0",
                "date": "2020-04-06",
                "status": "absent",
                "createdAt": "2020-04-06T13:57:30.000Z",
                "updatedAt": "2020-04-06T13:57:30.000Z",
                "userId": 2
            },
            {
                "id": 372,
                "checkIn": null,
                "checkOut": null,
                "totalHours": "0",
                "date": "2020-04-07",
                "status": "absent",
                "createdAt": "2020-04-07T13:57:30.000Z",
                "updatedAt": "2020-04-07T13:57:30.000Z",
                "userId": 2
            },
            {
                "id": 406,
                "checkIn": null,
                "checkOut": "2020-04-09T07:38:22.000Z",
                "totalHours": "NaN:NaN",
                "date": "2020-04-09",
                "status": "present",
                "createdAt": "2020-04-08T13:57:30.000Z",
                "updatedAt": "2020-04-09T07:38:22.000Z",
                "userId": 2
            },
            {
                "id": 441,
                "checkIn": "2020-04-09T07:38:25.000Z",
                "checkOut": null,
                "totalHours": null,
                "date": "2020-04-09",
                "status": "present",
                "createdAt": "2020-04-09T07:38:25.000Z",
                "updatedAt": "2020-04-09T07:38:25.000Z",
                "userId": 2
            },
            {
                "id": 528,
                "checkIn": "2020-04-14T07:27:20.000Z",
                "checkOut": null,
                "totalHours": null,
                "date": "2020-04-14",
                "status": "present",
                "createdAt": "2020-04-14T07:27:20.000Z",
                "updatedAt": "2020-04-14T07:27:20.000Z",
                "userId": 2
            },
            {
                "id": 522,
                "checkIn": "2020-04-14T07:27:18.000Z",
                "checkOut": null,
                "totalHours": null,
                "date": "2020-04-14",
                "status": "present",
                "createdAt": "2020-04-14T07:27:18.000Z",
                "updatedAt": "2020-04-14T07:27:18.000Z",
                "userId": 2
            },
            {
                "id": 535,
                "checkIn": "2020-04-14T07:27:25.000Z",
                "checkOut": "2020-04-14T07:27:31.000Z",
                "totalHours": "0:0",
                "date": "2020-04-14",
                "status": "present",
                "createdAt": "2020-04-14T07:27:25.000Z",
                "updatedAt": "2020-04-14T07:27:31.000Z",
                "userId": 2
            },
            {
                "id": 516,
                "checkIn": "2020-04-14T07:27:17.000Z",
                "checkOut": null,
                "totalHours": null,
                "date": "2020-04-14",
                "status": "present",
                "createdAt": "2020-04-14T07:27:17.000Z",
                "updatedAt": "2020-04-14T07:27:17.000Z",
                "userId": 2
            },
            {
                "id": 529,
                "checkIn": "2020-04-14T07:27:20.000Z",
                "checkOut": null,
                "totalHours": null,
                "date": "2020-04-14",
                "status": "present",
                "createdAt": "2020-04-14T07:27:20.000Z",
                "updatedAt": "2020-04-14T07:27:20.000Z",
                "userId": 2
            },
            {
                "id": 523,
                "checkIn": "2020-04-14T07:27:18.000Z",
                "checkOut": null,
                "totalHours": null,
                "date": "2020-04-14",
                "status": "present",
                "createdAt": "2020-04-14T07:27:18.000Z",
                "updatedAt": "2020-04-14T07:27:18.000Z",
                "userId": 2
            },
            {
                "id": 537,
                "checkIn": "2020-04-14T09:42:31.000Z",
                "checkOut": "2020-04-14T09:52:58.000Z",
                "totalHours": "0:10",
                "date": "2020-04-14",
                "status": "present",
                "createdAt": "2020-04-14T09:42:31.000Z",
                "updatedAt": "2020-04-14T09:52:58.000Z",
                "userId": 2
            },
            {
                "id": 517,
                "checkIn": "2020-04-14T07:27:17.000Z",
                "checkOut": null,
                "totalHours": null,
                "date": "2020-04-14",
                "status": "present",
                "createdAt": "2020-04-14T07:27:17.000Z",
                "updatedAt": "2020-04-14T07:27:17.000Z",
                "userId": 2
            },
            {
                "id": 530,
                "checkIn": "2020-04-14T07:27:20.000Z",
                "checkOut": null,
                "totalHours": null,
                "date": "2020-04-14",
                "status": "present",
                "createdAt": "2020-04-14T07:27:20.000Z",
                "updatedAt": "2020-04-14T07:27:20.000Z",
                "userId": 2
            },
            {
                "id": 524,
                "checkIn": "2020-04-14T07:27:19.000Z",
                "checkOut": null,
                "totalHours": null,
                "date": "2020-04-14",
                "status": "present",
                "createdAt": "2020-04-14T07:27:19.000Z",
                "updatedAt": "2020-04-14T07:27:19.000Z",
                "userId": 2
            },
            {
                "id": 518,
                "checkIn": "2020-04-14T07:27:17.000Z",
                "checkOut": null,
                "totalHours": null,
                "date": "2020-04-14",
                "status": "present",
                "createdAt": "2020-04-14T07:27:17.000Z",
                "updatedAt": "2020-04-14T07:27:17.000Z",
                "userId": 2
            },
            {
                "id": 531,
                "checkIn": "2020-04-14T07:27:21.000Z",
                "checkOut": null,
                "totalHours": null,
                "date": "2020-04-14",
                "status": "present",
                "createdAt": "2020-04-14T07:27:21.000Z",
                "updatedAt": "2020-04-14T07:27:21.000Z",
                "userId": 2
            },
            {
                "id": 525,
                "checkIn": "2020-04-14T07:27:19.000Z",
                "checkOut": null,
                "totalHours": null,
                "date": "2020-04-14",
                "status": "present",
                "createdAt": "2020-04-14T07:27:19.000Z",
                "updatedAt": "2020-04-14T07:27:19.000Z",
                "userId": 2
            },
            {
                "id": 519,
                "checkIn": "2020-04-14T07:27:17.000Z",
                "checkOut": null,
                "totalHours": null,
                "date": "2020-04-14",
                "status": "present",
                "createdAt": "2020-04-14T07:27:17.000Z",
                "updatedAt": "2020-04-14T07:27:17.000Z",
                "userId": 2
            },
            {
                "id": 532,
                "checkIn": "2020-04-14T07:27:22.000Z",
                "checkOut": "2020-04-14T07:27:22.000Z",
                "totalHours": "0:0",
                "date": "2020-04-14",
                "status": "present",
                "createdAt": "2020-04-14T07:27:22.000Z",
                "updatedAt": "2020-04-14T07:27:22.000Z",
                "userId": 2
            },
            {
                "id": 478,
                "checkIn": null,
                "checkOut": "2020-04-14T07:27:12.000Z",
                "totalHours": "NaN:NaN",
                "date": "2020-04-14",
                "status": "present",
                "createdAt": "2020-04-10T13:57:30.000Z",
                "updatedAt": "2020-04-14T07:27:12.000Z",
                "userId": 2
            },                              
        ]
      }
    ],
  "status": 1
}

С помощью этого кода я получаю только один день данных вместо 30 дней. Вот мой код.

  componentDidMount() {
  const url = 'http://104.197.28.169:3000/monthlyAdminData/10' ;
  fetch(url)
  .then(response => response.json())
  .then((responseJson) => {
     console.log("aagiyo" ,responseJson)
     this.setState({
      dataSource: responseJson.data,
      isLoading: false,
  })
  })
  .catch(error => console.log(error)) 
 }
  renderItem =  ({ item}) => {
  return (
    <View style={styles.firstV1}>     
    <View style={styles.heading}>
    <Text style={{  fontSize: 15,}}>{item.addEmployee.firstName }</Text>
    </View>
       <View style={styles.heading}>
  <Text style={{  fontSize: 15}}>{item.attendances.length >0 ? item.attendances[0].date : null} 
 </Text>          
    </View>
    <View style={styles.heading}>   
    <Text style={{  fontSize: 15}}> {item.attendances.length >0 ?item.attendances[0].checkIn : 
  null}</Text>
   </View>
    <View style={styles.heading}>
    <Text style={{ fontSize: 15,}}>{item.attendances.length >0 ? item.attendances[0].checkOut : 
 null }</Text>
    </View>
    <View style={styles.heading}>
    <Text style={{ fontSize: 15}}>{item.attendances.length >0 ? item.attendances[0].totalHours : 
  null }</Text>                                           
    </View>     
  </View>
  )
 }

Answer 1

Вам нужно включить функцию карты внутри, я работал над вашим кодом и изменил вашу функцию рендеринга следующим образом:

    import React from 'react';
    import {View, FlatList, Text} from 'react-native'; 

    export default class App extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                data:[
                    {
                        "id": 2,
                        "addEmployee": {
                            "firstName": "Mohd"
                        },
                        "attendances": [
                            {
                               //Your data
                          }
                        ]
                    },
                    {
                        "id": 21,
                        "addEmployee": {
                            "firstName": "Narayan"
                        },
                        "attendances": [
                            {
                                "id": 617,
                                "checkIn": "2020-04-17T05:20:45.000Z",
                                "checkOut": "2020-04-17T05:21:22.000Z",
                                "totalHours": "0:0",
                                "date": "2020-04-17",
                                "status": "present",
                                "createdAt": "2020-04-17T05:20:45.000Z",
                                "updatedAt": "2020-04-17T05:21:22.000Z",
                                "userId": 21
                            },
                        ]
                    },
                    {
                        "id": 20,
                        "addEmployee": {
                            "firstName": "Himanshu"
                        },
                        "attendances": []
                    },
                ],
             };
            }

            render() {
        return (
            <FlatList
            data={this.state.data}
            renderItem={({ item }) =>
            {      
                return(
                    <View style={{alignItems:"center",justifyContent:"center",marginTop:50}}>
            <Text style={{fontWeight:"bold",fontSize:18}}>Attendance of {item.addEmployee.firstName}</Text>
            { item.attendances.length > 0 ?
                item.attendances.map((item, key) => 
                {
                    return(

                        <View>
                            <View>
                        <Text style={{ fontSize: 15, fontWeight:"bold",marginLeft:"35%" }}>Day{key+1}</Text>
                    </View>
                    <View
                                style={{
                                    borderBottomColor: 'black',
                                    borderBottomWidth: 1,
                                }}
                            />

                    <View style={{flexDirection:"row"}}>
                            <Text style={{fontWeight:"bold",width:"40%"}}>Check In :</Text>
                        <Text style={{ fontSize: 15, width:"50%"}}>{item.checkIn}</Text>
                    </View>
                    <View style={{flexDirection:"row"}}>
                            <Text style={{fontWeight:"bold",width:"40%"}}>Check Out :</Text>
                        <Text style={{ fontSize: 15, width:"50%"}}>{item.checkOut}</Text>
                    </View>
                    <View style={{flexDirection:"row"}}>
                            <Text style={{fontWeight:"bold",width:"40%"}}>Total Hours :</Text>
                        <Text style={{ fontSize: 15, width:"50%"}}>{item.totalHours}</Text>
                    </View>

                        </View>
                  )
                }) : null
            }
                    </View>
                )
            }
                }
               />
        );
      }
  }

Надеюсь, это поможет!