![](/img/trans.png)
[英]React Native: How to get data from JSON with different keys and display it?
[英]How to display specific keys of json data in React
我有這個 Json 數據:
[
{
"serial_number": "test",
"added_at": "2021-02-05T18:58:43.382943Z",
"ser_mod": [
{
"added_at": "2021-02-06T02:15:51.513446Z",
"module": "test",
"time": "0.05"
},
{
"added_at": "2021-02-09T00:44:46.254122Z",
"module": "test",
"time": "2.23"
},
{
"added_at": "2021-02-09T00:44:58.010508Z",
"module": "test",
"time": "2.23"
}
]
},
{
"serial_number": "test2",
"added_at": "2021-02-09T10:04:38.394083Z",
"ser_mod": [
{
"added_at": "2021-02-09T10:05:43.605226Z",
"module": "test2",
"time": "2.23"
}
]
}
]
我想顯示serial_number
和最新time
<React.Fragment>
<Container maxWidth='md' component='main'>
<Grid container spacing={5} alignItems='flex-end'>
{modules.map((module) => {
return (
<Grid item key={module.serial_number} xs={12} md={12}>
<Card className={classes.card}>
<CardContent className={classes.cardContent}>
<Typography
gutterBottom
variant='h6'
component='h1'
className={classes.postTitle}
>
Serial Number: {module.serial_number}
</Typography>
<div className={classes.postText}>
<Typography component='p' color='textPrimary' />
<Typography variant='p' color='textSecondary'>
Time: {module.ser_mod.time}
</Typography>
</div>
</CardContent>
</Card>
</Grid>
);
})}
</Grid>
</Container>
</React.Fragment>;
但我無法完成這項工作; 時間未按預期顯示。 這就是我得到的:
我應該怎么做才能解決這個問題?
您只需要選擇最后一個ser_mod
元素。
更改自:
<Typography variant="p" color="textSecondary">
Time: {module.ser_mod.time}
</Typography>
至:
<Typography variant="p" color="textSecondary">
Time: {module.ser_mod[ module.ser_mod.length - 1].time}
</Typography>
modules.map
回調而不return
:{modules.map((module) => (
/* ... */
)}
module
優化和澄清:{modules.map(({serial_number, ser_mod}) => (
<Grid item key={serial_number} xs={12} md={12}>
/* ... */
</Grid>
)}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.