Как получить доступ к данным вложенного массива на экране в React-Native

Question

У меня есть массив объектов Data, которые содержат другой массив посещаемости, и я хочу получить доступ ко всем атрибутам посещаемости. Мне нужно иметь возможность вставлять данные в checkIn, checkOut и общее количество часов, которые принадлежат вложенному массиву, называемому посещаемостью. Я не могу получить данные такого типа из HTTP-запроса, пожалуйста, предложите и проверьте мой код. И я также хотел знать, как мы можем получить данные из нескольких массивов из JSON API?

"data": [
    {
        "id": 40,
        "addEmployee": {
            "firstName": "Divyanshu"
        },
        "attendances": [
            {
                "id": 615,
                "checkIn": null,
                "checkOut": "2020-04-17T04:54:15.000Z",
                "totalHours": "NaN:NaN",
                "date": "2020-04-17",
                "status": "present",
                "createdAt": "2020-04-16T13:57:30.000Z",
                "updatedAt": "2020-04-17T04:54:15.000Z",
                "userId": 40
            }
        ]
    },
    {
        "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": []
    },
    0'.v\zcfipzgzy
],
    "status": 1
 }

Я могу вставить данные в обычный массив. Но я не знаю, как вставить во вложенный массив, и я не могу получить доступ к данным посещаемости из данных выше вложенного массива.

componentDidMount() {
    const url = 'http://104.197.28.169:3000/todayAttendanceList'
    fetch(url)
        .then(response => response.json())
        .then((responseJson) => {
            console.log("aagiyo", responseJson)
            this.setState({
                dataSource: responseJson,
                isLoading: false
            })
        })
        .catch(error => console.log(error))
}

<FlatList
    data={this.state.dataSource}
    renderItem={({ item }) =>
        <View style={styles.firstV1}>
            <View style={styles.heading}>
                <Text style={{ fontSize: 15 }}>{item.attendances.checkIn}</Text>
            </View>
            <View style={styles.heading}>
                <Text style={{ fontSize: 15, }}>{item.attendances.checkOut}</Text>
            </View>
            <View style={styles.heading}>
                <Text style={{ fontSize: 15 }}>{item.attendances.totalHours}</Text>
            </View>
        }
         ItemSeparatorComponent={this.renderSeperator}
       />

Answer 1

Вы можете сделать что-то вроде этого, чтобы отобразить посещаемость с помощью вашего API:

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": 40,
                    "addEmployee": {
                        "firstName": "Divyanshu"
                    },
                    "attendances": [
                        {
                            "id": 615,
                            "checkIn": null,
                            "checkOut": "2020-04-17T04:54:15.000Z",
                            "totalHours": "NaN:NaN",
                            "date": "2020-04-17",
                            "status": "present",
                            "createdAt": "2020-04-16T13:57:30.000Z",
                            "updatedAt": "2020-04-17T04:54:15.000Z",
                            "userId": 40
                        }
                    ]
                },
                {
                    "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>
                    <View>
                        <Text style={{ fontSize: 15 }}><Text style={{fontWeight:"bold"}}>Check In:</Text>  {item.attendances.length >0 ? item.attendances[0].checkIn : null}</Text>
                    </View>
                    <View>
                        <Text style={{ fontSize: 15, }}><Text style={{fontWeight:"bold"}}>Check Out:</Text>{item.attendances.length >0 ? item.attendances[0].checkOut : null}</Text>
                    </View>
                    <View>
                        <Text style={{ fontSize: 15 }}><Text style={{fontWeight:"bold"}}>Total hours:</Text>{item.attendances.length >0 ? item.attendances[0].totalHours : null}</Text>
                    </View>
                    </View>
                )
            }
                }
               />
        );
      }
  }

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

Answer 2

Немного неясно, чего вы хотите достичь. Если вы хотите отобразить весь список посещений и соответствующих сотрудников, используйте SectionList .

. Вы можете сделать что-то вроде:

изменить это утверждение:

this.setState({
                dataSource: responseJson,
                isLoading: false
            })

to:

const transformedData = responseJson.map(elem => ({
    key: elem.id,
    title: elem.addEmployee.firstName,
    data: elem.attendances
}))

this.setState({
    dataSource: responseJson,
    transformedDatasource: transformedData
    isLoading: false,
})

И замените ваш код FlatList на что-то вроде:

<SectionList
      sections={this.state.transformedDatasource}
      keyExtractor={(item, index) => item.id}
      renderItem={({ item }) =>
        <View style={styles.firstV1}>
            <View style={styles.heading}>
                <Text style={{ fontSize: 15 }}>{item.checkIn}</Text>
            </View>
            <View style={styles.heading}>
                <Text style={{ fontSize: 15, }}>{item.checkOut}</Text>
            </View>
            <View style={styles.heading}>
                <Text style={{ fontSize: 15 }}>{item.totalHours}</Text>
            </View>
        }}
      renderSectionHeader={({ section: { title } }) => (
        <Text>{title}</Text>
      )}
    />

Answer 3

Используйте функцию map с расширенным синтаксисом для вставки данных в значения checkIn, checkOut и totalHours:

responseJson.map(item => ({...item, attendances: item.attendances.map(attendance => 
({...attendance, checkIn: 'your checkIn value', checkOut: 'your checkOut value', 
totalHours: 'totalHours value'}))}))