在 React JavaScript 中显示/映射嵌套的 JSON 字段答案

【问题标题】：Display/Map Nested JSON fields in React JavaScript在 React JavaScript 中显示/映射嵌套的 JSON 字段
【发布时间】：2020-08-08 08:40:53
【问题描述】：

这是我第一次在这里发帖。我目前正在开发 JavaScript、React 和 Material-UI 方面的技能。我正在尝试在表格中显示来自我的示例嵌套 JSON 文件的帐单数据。

它会登录控制台，但我不明白为什么它没有显示在我的表格中。请帮帮我:(

这是我的 JSON 文件：

[
  {
    "data": {
      "transactions": [
        {
          "referenceNumber": "2323",
          "transaction": "Reload",
          "details": {
            "sourceAccntNickname": "6jkp",
            "sourceAcountNicknae": "6*****48",
            "transactionDate": "Feb 08, 2018",
            "biller": [
              {
                "billerName": "AT&T",
                "billerAccntNumber": "6***98"
              }
            ],
            "recurring": false,
            "amount": 600000
          },
          "status": "failed"
        },
        {
          "referenceNumber": "2323",
          "transaction": "Reload",
          "details": {
            "sourceAccntNickname": "7jkp",
            "sourceAcountNicknae": "7*****48",
            "transactionDate": "Feb 09, 2018",
            "biller": [
              {
                "billerName": "AT&T",
                "billerAccntNumber": "6***98"
              }
            ],
            "recurring": true,
            "frequency": "Monthly",
            "amount": 700000
          },
          "status": "failed"
        }
      ]
    }
  }
]

这是我将数据显示到我的表格的代码：

<TableBody>
          {stableSort(SchedData, getComparator(order, orderBy)).map(
            (data, index) => {
              return (
                <TableRow tabIndex={-1} key={index}>
                  <TableCell>
                    {data.data.transactions.map((date, index) => {
                      return (
                        <Typography key={index}>
                          {date.details.transactionDate}
                        </Typography>
                      );
                    })}
                  </TableCell>
                  <TableCell>
                    {data.data.transactions.map((rec, index) => {
                      return (
                        <h1 key={index}>
                          {rec.details.recurring === false ? (
                            <Typography>Future-dated</Typography>
                          ) : (
                            <Typography>{rec.details.frequency}</Typography>
                          )}
                        </h1>
                      );
                    })}
                  </TableCell>
                  <TableCell align='right'>
                    {data.data.transactions.map((bil, index) => {
                      bil.details.biller.map((bilNameAcct, index) => {
                        console.log(
                          bilNameAcct.billerName,
                          bilNameAcct.billerAccntNumber
                        );
                        return (
                          <Typography key={index}>
                            {bilNameAcct.billerName}
                            <br />
                            {bilNameAcct.billerAccntNumber}
                          </Typography>
                        );
                      });
                    })}
                  </TableCell>
                  <TableCell align='right'></TableCell>
                  <TableCell align='right'></TableCell>
                </TableRow>
              );
            }
          )}
        </TableBody>

这是我的输出和控制台的图像副本： OUTPUT/CONSOLE

非常感谢任何帮助和提示。提前感谢您帮助我！

【问题讨论】：

标签： javascript json reactjs material-ui

【解决方案1】：

您忘记从map() 函数返回结果。

您的代码：

data.data.transactions.map((bil, index) => {
  bil.details.biller.map((bilNameAcct, index) => { 
    /* ... */ 
  })
})

工作代码：

data.data.transactions.map((bil, index) => {
  return bil.details.biller.map((bilNameAcct, index) => { 
    /* ... */ 
  })
})

完整的<TableCell />:

<TableCell align="right">
  {data.data.transactions.map((bil, index) => {
    return bil.details.biller.map((bilNameAcct, index) => {
      console.log(
        bilNameAcct.billerName,
        bilNameAcct.billerAccntNumber
      );
      return (
        <Typography key={index}>
          {bilNameAcct.billerName}
          <br />
          {bilNameAcct.billerAccntNumber}
        </Typography>
      );
    });
  })}
</TableCell>

【讨论】：

【解决方案2】：

您错过了地图功能中的返回

 <TableCell align='right'>
    {data.data.transactions.map((bil, index) => {
      return bil.details.biller.map((bilNameAcct, index) => { // you missed it here
        console.log(
          bilNameAcct.billerName,
          bilNameAcct.billerAccntNumber
        );
        return (
          <Typography key={index}>
            {bilNameAcct.billerName}
            <br />
            {bilNameAcct.billerAccntNumber}
          </Typography>
        );
      });
    })}
  </TableCell>

【讨论】：