How to Access Nested object inside Nested Array JSON data on Screen in React-Native

Question

I have an array of Data objects that contain another array of Attendance and I just want to access the all 30 day data from attendances array.I am trying to get date,chechIn,checkOut and totalHoure data of 30 days from attendances array.Here is my JSON API data.Please check my code too.

 {
"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
}

With the help of this code I am getting only one day of data instead of 30 days.Here is my code.

  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>
  )
 }

you are passing the first value of your attendances instead of it use a map function here. — Goskula Jayachandra
– Goskula Jayachandra, Commented Apr 23, 2020 at 8:51

Community · Accepted Answer · 2020-06-20 09:12:55Z

You need to include the map function inside, I had worked on your code change your render function like this:

    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>
                )
            }
                }
               />
        );
      }
  }

Hope this helps!

Collectives™ on Stack Overflow

How to Access Nested object inside Nested Array JSON data on Screen in React-Native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related