如何在TypeScript(.tsx)中解析嵌套JSON并展示指定数据？

需求 #

需要解析给定的嵌套JSON数据，提取并展示以下信息：

• 日期：2022-10-27T16:28:01Z
• 类型名称：Asset
• PolicyId：12345678abcdef
• 资产名称：12345678abc
• 数量：5000
• 输出交易哈希：1212345678abcdef、12bcd12345678abcdef1234

给定的JSON数据 #

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

解决方案 #

1. 定义TypeScript类型（避免使用any，提升代码安全性） #

// 对应JSON结构的类型定义
interface Asset {
  __typename: string;
  policyId: string;
  assetName: string;
  name: string | null;
}

interface Token {
  __typename: string;
  asset: Asset;
  quantity: string;
}

interface TransactionOutput {
  __typename: string;
  txHash: string;
  value: string;
  tokens: Token[];
}

interface Transaction {
  __typename: string;
  includedAt: string;
  mint: Token[];
  outputs: TransactionOutput[];
}

interface TransactionData {
  transactions: Transaction[];
}

2. 解析JSON数据 #

如果原始数据是字符串形式，用JSON.parse解析；如果已经是JavaScript对象，直接使用即可：

// 示例：原始数据为字符串的情况
const rawJson = `{"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 parsedData: TransactionData = JSON.parse(rawJson);

3. TSX中渲染指定字段 #

function TransactionDisplay() {
  // 取第一个交易数据（根据JSON结构，transactions是数组）
  const targetTransaction = parsedData.transactions[0];
  // 提取资产信息（从mint数组的第一个元素中获取）
  const targetAsset = targetTransaction.mint[0]?.asset;
  // 提取所有输出交易哈希
  const outputHashes = targetTransaction.outputs.map(output => output.txHash);

  return (
    <table>
      <tbody>
        <tr>
          <td><strong>日期：</strong>{targetTransaction.includedAt}</td>
        </tr>
        {/* 空值判断：确保asset存在再渲染相关字段 */}
        {targetAsset && (
          <>
            <tr>
              <td><strong>类型名称：</strong>{targetAsset.__typename}</td>
            </tr>
            <tr>
              <td><strong>PolicyId：</strong>{targetAsset.policyId}</td>
            </tr>
            <tr>
              <td><strong>资产名称：</strong>{targetAsset.assetName}</td>
            </tr>
          </>
        )}
        <tr>
          <td><strong>数量：</strong>{targetTransaction.mint[0]?.quantity}</td>
        </tr>
        <tr>
          <td><strong>输出交易哈希：</strong>{outputHashes.join('、')}</td>
        </tr>
      </tbody>
    </table>
  );
}

关键说明 #

• 类型定义能让TypeScript提供代码提示，避免类型错误，比直接用any更规范可靠
• 用?.可选链操作符处理数组为空的情况，防止出现Cannot read property 'xxx' of undefined的报错
• 输出交易哈希通过map遍历outputs数组提取，再用join拼接成需求的格式

内容的提问来源于stack exchange，提问作者Sd1