如何在React-Native中的屏幕上访问嵌套数组JSON数据内的嵌套对象
我有一个Data对象数组，其中包含另一个出勤数组，我只想从出勤数组访问所有30天数据。我试图从出勤数组中获取30天的日期，chechIn，checkOut和totalHoure数据这是我的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>
)
}
1 个答案:
答案 0 :(得分：1)
您需要在其中包含map函数，我已经在您的代码上进行过如下更改渲染功能的操作：
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>
)
}
}
/>
);
}
}
希望这会有所帮助！
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？