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

Question

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.

Answer 1

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>
                )
            }
        )