React native 如何在React Native中访问屏幕上嵌套数组JSON数据中的嵌套对象
我有一个包含另一个考勤数组的数据对象数组，我只想访问考勤数组中的所有30天数据。我正在尝试从考勤数组中获取30天的日期、切钦、结帐和总小时数据。这是我的JSON API数据。请检查我的代码React native 如何在React Native中访问屏幕上嵌套数组JSON数据中的嵌套对象,react-native,React Native,我有一个包含另一个考勤数组的数据对象数组，我只想访问考勤数组中的所有30天数据。我正在尝试从考勤数组中获取30天的日期、切钦、结帐和总小时数据。这是我的JSON API数据。请检查我的代码 { "message": "30 day data", "data": [ { "id": 2, "addEmployee": { "firstName": "Mohd" }, "attendances": [
{
"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
}
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>
)
}
componentDidMount（）{
常量url=http://104.197.28.169:3000/monthlyAdminData/10' ;
获取（url）
.then（response=>response.json（））
.然后（（responseJson）=>{
console.log（“aagiyo”，responseJson）
这是我的国家({
数据源：responseJson.data，
孤岛加载：false，
})
})
.catch（错误=>console.log（错误））
}
renderItem=（{item}）=>{
返回(
{item.addEmployee.firstName}
{item.attentings.length>0？item.attentings[0]。日期：null}
{item.attentings.length>0？item.attentings[0]。签入：
空}
{item.attentings.length>0？item.attentings[0]。签出：
空}
{item.attentings.length>0？item.attentings[0]。总小时数：
空}
)
}
您需要在其中包含贴图功能，我已经编写了您的代码，更改了渲染功能，如下所示：
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>
)
}
}
/>
);
}
}
从“React”导入React；
从“react native”导入{View，FlatList，Text}；
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[
{
“id”：2，
“增聘员工”：{
“名字”：“莫德”
},
“出席人数”：[
{
//你的数据
}
]
},
{
“id”：21，
“增聘员工”：{
“名字”：“纳拉扬”
},
“出席人数”：[
{
“id”：617，
“签入”：“2020-04-17T05:20:45.000Z”，
“签出”：“2020-04-17T05:21:22.000Z”，
“总小时数”：“0:0”，
“日期”：“2020-04-17”，
“状态”：“当前”，
“createdAt”：“2020-04-17T05:20:45.000Z”，
“更新日期”：“2020-04-17T05:21:22.000Z”，
“用户ID”：21
},
]
},
{
“id”：20，
“增聘员工”：{
“名字”：“希曼殊”
},
“出席人数”：[]
},
],
};
}
render（）{
返回(
{
返回(
{item.addEmployee.firstName}的出席情况
{item.attentings.length>0？
项目.出席人数.地图（（项目，关键）=>
{
返回(
第{key+1}天
登记入住：
{item.checkIn}
退房：
{item.checkOut}
总小时数：
{item.totalHours}
)
})：null
}
)
}
}
/>
);
}
}
希望这有帮助 您正在传递您的第一个出席率值，而不是在此处使用map函数。如何传递？我是react-native的新手。请解释。是的，我会发布答案，检查一下。