将嵌套的 JSON 字段分配给数组

Question

我目前正在尝试提高我使用 JavaScript、React 和 Material-UI 的技能。我正在尝试使用嵌套的 JSON 对我的表进行排序，但我一直坚持将我的 JSON 字段分配给我的数组。有什么方法可以访问我的 JSON 并将其分配给我的数组中的 id？

Table-Sorting-Sandbox

这是我的 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

Answer 1

您可能要考虑的一个可能的解决方案是首先展平您的数据 - 删除嵌套。

您可以使用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>
  );
}

分叉和更新的代码框：