[英]Assign nested JSON fields to an Array
我目前正在尝试提高我使用 JavaScript、React 和 Material-UI 的技能。 我正在尝试使用嵌套的 JSON 对我的表进行排序,并且我坚持将我的 JSON 字段分配给我的数组。 有什么方法可以访问我的 JSON 并将其分配给我的数组中的 id 吗?
这是我的 JSON 的副本:
{
"data": {
"transactions": [
{
"referenceNumber": "912349949908",
"transaction": "Reload",
"details": {
"sourceAccntNickname": "1jkp",
"sourceAcountNumber": "6*****48",
"transactionDate": "Feb 08, 2018",
"billerName": "Bill1",
"billerAccntNumber": "6***98",
"recurring": false,
"amount": 100000
},
"status": "failed"
},
{
"referenceNumber": "01237659123",
"transaction": "Reload",
"details": {
"sourceAccntNickname": "4jkp",
"sourceAcountNumber": "7*****48",
"transactionDate": "Feb 11, 2018",
"billerName": "Bill4",
"billerAccntNumber": "6***98",
"recurring": true,
"frequency": "Monthly",
"amount": 400000
},
"status": "success"
},
{
"referenceNumber": "012836591828",
"transaction": "Reload",
"details": {
"sourceAccntNickname": "3jkp",
"sourceAcountNumber": "7*****48",
"transactionDate": "Feb 10, 2018",
"billerName": "Bill3",
"billerAccntNumber": "6***98",
"recurring": true,
"frequency": "Monthly",
"amount": 300000
},
"status": "pending"
},
{
"referenceNumber": "69880129365123",
"transaction": "Reload",
"details": {
"sourceAccntNickname": "2jkp",
"sourceAcountNumber": "7*****48",
"transactionDate": "Feb 09, 2018",
"billerName": "Bill2",
"billerAccntNumber": "6***98",
"recurring": true,
"frequency": "Monthly",
"amount": 200000
},
"status": "failed"
}
]
}
}
这是我需要排序的表头数组的源代码:
function descendingComparator(a, b, orderBy) {
if (b[orderBy] < a[orderBy]) {
return -1;
}
if (b[orderBy] > a[orderBy]) {
return 1;
}
return 0;
}
function getComparator(order, orderBy) {
return order === 'desc'
? (a, b) => descendingComparator(a, b, orderBy)
: (a, b) => -descendingComparator(a, b, orderBy);
}
function stableSort(array, comparator) {
const stabilizedThis = array.map((el, index) => [el, index]);
stabilizedThis.sort((a, b) => {
const order = comparator(a[0], b[0]);
if (order !== 0) return order;
return a[1] - b[1];
});
return stabilizedThis.map((el) => el[0]);
}
/* const date = SchedData.data.transactions.map(
(data) => data.details.transactionDate
);
console.log('Dates:', date, typeof date); */
const headCells = [
{
id: 'transactionDate',
numeric: false,
disablePadding: true,
label: 'PAYMENT DATE',
},
{ id: 'recurring', numeric: false, disablePadding: false, label: 'SCHEDULE' },
{ id: 'frequency', numeric: false, disablePadding: false, label: 'BILLER' },
{
id: 'sourceAccntNickname',
numeric: false,
disablePadding: false,
label: 'SOURCE',
},
{ id: 'amount', numeric: true, disablePadding: false, label: 'AMOUNT' },
{ id: 'status', numeric: false, disablePadding: false, label: 'STATUS' },
];
const StyledTableCell = withStyles((theme) => ({
head: {
backgroundColor: theme.palette.action.hover,
},
body: {
fontSize: 14,
},
}))(TableCell);
function EnhancedTableHead(props) {
const {
classes,
onSelectAllClick,
order,
orderBy,
numSelected,
rowCount,
onRequestSort,
} = props;
const createSortHandler = (property) => (event) => {
onRequestSort(event, property);
};
return (
<TableHead>
<TableRow>
{headCells.map((headCell) => (
<StyledTableCell
key={headCell.id}
sortDirection={orderBy === headCell.id ? order : false}
>
<TableSortLabel
active={orderBy === headCell.id}
direction={orderBy === headCell.id ? order : 'asc'}
onClick={createSortHandler(headCell.id)}
>
{headCell.label}
{orderBy === headCell.id ? (
<span className={classes.visuallyHidden}>
{order === 'desc' ? 'sorted descending' : 'sorted ascending'}
</span>
) : null}
</TableSortLabel>
</StyledTableCell>
))}
</TableRow>
</TableHead>
);
}
分配一个不像状态字段那样嵌套的字段是可行的,但是如果它在嵌套中我该怎么办? 我尝试了我能想到的一切,但我想我现在需要你们的帮助。 任何帮助、提示、建议等将不胜感激。 谢谢!
编辑(20 年 8 月 16 日):您好:这是我工作的沙盒副本的链接: Table-Sorting-Sandbox
您可能要考虑的一种可能的解决方案是首先展平您的数据 - 删除嵌套。
您可以使用useEffect
在表格呈现之前准备数据。 检查下面的代码。
export default function Scheduled() {
const classes = useStyles();
const [order, setOrder] = React.useState("asc");
const [orderBy, setOrderBy] = React.useState("");
// state that will hold the flattened data
const [schedData, setSchedData] = React.useState([]);
React.useEffect(() => {
const { transactions } = SchedData.data;
const schedData = transactions.map((transaction) => {
// make all `details` properties to be accessible
// on the same level as `status`
return { ...transaction, ...transaction.details };
});
setSchedData(schedData);
}, []);
const handleRequestSort = (event, property) => {
const isAsc = orderBy === property && order === "asc";
setOrder(isAsc ? "desc" : "asc");
setOrderBy(property);
};
return (
<div className={classes.root}>
<Paper className={classes.paper}>
<TableContainer>
<Table
className={classes.table}
aria-labelledby="tableTitle"
aria-label="enhanced table"
>
<EnhancedTableHead
classes={classes}
order={order}
orderBy={orderBy}
onRequestSort={handleRequestSort}
rowCount={schedData}
/>
<TableBody>
{stableSort(schedData, getComparator(order, orderBy)).map(
(data, index) => {
return (
<TableRow tabIndex={-1} key={index}>
{/* notice here, we don't have to use `data.details` */}
<TableCell>{data.transactionDate}</TableCell>
<TableCell>{data.frequency}</TableCell>
<TableCell>{data.billerName}</TableCell>
<TableCell>{data.sourceAccntNickname}</TableCell>
<TableCell>{data.amount}</TableCell>
<Table>{data.status}</Table>
</TableRow>
);
}
)}
</TableBody>
</Table>
</TableContainer>
</Paper>
</div>
);
}
分叉和更新的代码框:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.