How to parse a nested json file in typescript (.tsx)?-CodePudding

I'm new to typescript and looking for a way to parse this nested json data given below and display the following info after parsing:

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": []
          }
        ]
      }
    ]
  }

I tried the following code:

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

and was able to display the Date:

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

I'm not able to proceed due to the nested nature of the json file and my lack of familiarity with tsx. All help appreciated. Thanks.

CodePudding user response：

Need to add the nested loop to show data.

Also in order to access keys starting with -, use a square bracket instead of the . operator. like 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>
                )
            }
        )