如何解析 typescript (.tsx) 中的嵌套 json 文件？答案

【问题标题】：How to parse a nested json file in typescript (.tsx)?如何解析 typescript (.tsx) 中的嵌套 json 文件？
【发布时间】：2022-11-19 15:51:39
【问题描述】：

我是打字稿的新手，正在寻找一种方法来解析下面给出的嵌套 json 数据并在解析后显示以下信息：

日期：2022-10-27T16:28:01Z 类型名”：资产， PolicyId：12345678abcdef，资产名称：12345678abc，数量：5000，输出 txHash：1212345678abcdef，输出 txHash：1212345678abcdef1234

{
    "transactions": [
      {
        "__typename": "Transaction",
        "includedAt": "2022-10-27T16:28:01Z",
        "mint": [
          {
            "__typename": "Token",
            "asset": {
              "__typename": "Asset",
              "policyId": "12345678abcdef",
              "assetName": "12345678abc",
              "name": null
            },
            "quantity": "5000"
          }
        ],
        "outputs": [
          {
            "__typename": "TransactionOutput",
            "txHash": "1212345678abcdef",
            "value": "1500000",
            "tokens": [
              {
                "__typename": "Token",
                "asset": {
                  "__typename": "Asset",
                  "policyId": "12345678abcdef",
                  "assetName": "12345678abc"
                },
                "quantity": "5000"
              }
            ]
          },
          {
            "__typename": "TransactionOutput",
            "txHash": "12bcd12345678abcdef1234",
            "value": "9998312015",
            "tokens": []
          }
        ]
      }
    ]
  }

我尝试了以下代码：

const myJSON = JSON.stringify(data, null, 2);
const myArray = JSON.parse(myJSON);

并能够显示日期：

const DisplayData1 = myArray.transactions.map(
            (info:any) => {
                return(
                    <tr>
                        <td>{info.includedAt}</td>
                    </tr>
                )
            }
        )

由于 json 文件的嵌套性质以及我对 tsx 不熟悉，我无法继续。所有帮助表示赞赏。谢谢。

【问题讨论】：

标签： reactjs json parsing nested tsx

【解决方案1】：

需要添加嵌套循环来显示数据。

此外，为了访问以- 开头的密钥，请使用方括号而不是. 运算符。喜欢obj['__typename']

const DisplayData1 = myArray.transactions.map(
            (info:any) => {
                return(
                    <tr>
                        <td>{info.includedAt}</td>

                         {
                             info.mint.map((i) => {
                                 return (
                                   <td>{i['__typename']}</td>
                                   <td>{i.quantity}</td>
                                   <td>{i.asset.policyId}</td> // access `asset` object

                                  )
                              })
                          }
                    </tr>
                )
            }
        )

【讨论】：