如何決議typescript(.tsx)中的嵌套json檔案？-有解無憂

我是打字稿的新手，正在尋找一種方法來決議下面給出的嵌套 json 資料并在決議后顯示以下資訊：

Date: 2022-10-27T16:28:01Z Typename": Asset, PolicyId: 12345678abcdef, Asset Name: 12345678abc, Quantity:5000, Output txHash: 1212345678abcdef, Output 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 不熟悉，我無法繼續。所有幫助表示贊賞。謝謝。

uj5u.com熱心網友回復：

需要添加嵌套回圈來顯示資料。

此外，為了訪問以開頭的鍵-，請使用方括號代替.運算子。喜歡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>
                )
            }
        )

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/536684.html

標籤：反应JSON解析嵌套多伦多证券交易所

上一篇：CultureInfo.CurrentCulture和Thread.CurrentThread.CurrentCulture之間的區別

下一篇：將具有不規則列寬的文本檔案決議為Pandas