如何从钱包交易数据中提取币种及交易金额并展示？

我尝试获取后端钱包数据并以表格形式展示，通过JSON.stringify(walletData.transactions, null, 2)得到交易数组如下：

[
  {
    "date": "Nov 07, 2023",
    "description": "You withdrew funds from your wallet.",
    "amount": "ETH {'token_symbol': 'ETH', 'amount': {'is_exact': True, 'exact': '-10', 'display': '-10.000'}}"
  },
  {
    "date": "Nov 05, 2023",
    "description": "You deposited funds into your wallet.",
    "amount": "ETH {'token_symbol': 'ETH', 'amount': {'is_exact': True, 'exact': '10', 'display': '10.000'}}"
  },
  {
    "date": "Nov 05, 2023",
    "description": "You deposited funds into your wallet.",
    "amount": "VICA {'token_symbol': 'VICA', 'amount': {'is_exact': True, 'exact': '5000', 'display': '5000.000'}}"
  },
  {
    "date": "Nov 05, 2023",
    "description": "You deposited funds into your wallet.",
    "amount": "USDT {'token_symbol': 'USDT', 'amount': {'is_exact': True, 'exact': '150', 'display': '150.000'}}"
  },
  {
    "date": "Nov 01, 2023",
    "description": "You deposited funds into your wallet.",
    "amount": "ETH {'token_symbol': 'ETH', 'amount': {'is_exact': True, 'exact': '10', 'display': '10.000'}}"
  }
]

我用以下代码渲染表格：

<TableContainer>
      <Table variant="simple">
        <Thead>
          <Tr>
            <Th>Date</Th>
            <Th>Coin</Th>
            <Th>Coin Amount</Th>
          </Tr>
        </Thead>
        <Tbody>
          {userWalletData.transactions.map((info) => {
            return (
              <Tr>
                <Td>{info.date}</Td>
                <Td>{info.amount}</Td>
                <Td>{info.date} </Td>
                <Td>{}</Td>
              </Tr>
            );
          })}
        </Tbody>
      </Table>
    </TableContainer>

现在需要在表格里只展示币种和交易金额，该怎么提取对应数据？

以下是console.log(userWalletData)输出的原始完整数据：

{
    "wallet_address": "WALLET ADDRESS",
    "eth_balance": {
        "is_exact": true,
        "exact": "10",
        "display": "10.000"
    },
    "usdt_balance": {
        "is_exact": true,
        "exact": "150",
        "display": "150.000"
    },
    "vica_balance": {
        "is_exact": true,
        "exact": "5000",
        "display": "5000.000"
    },
    "transactions": [
        {
            "date": "Nov 07, 2023",
            "description": "You withdrew funds from your wallet.",
            "amount": "ETH {'token_symbol': 'ETH', 'amount': {'is_exact': True, 'exact': '-10', 'display': '-10.000'}}"
        },
        {
            "date": "Nov 05, 2023",
            "description": "You deposited funds into your wallet.",
            "amount": "ETH {'token_symbol': 'ETH', 'amount': {'is_exact': True, 'exact': '10', 'display': '10.000'}}"
        },
        {
            "date": "Nov 05, 2023",
            "description": "You deposited funds into your wallet.",
            "amount": "VICA {'token_symbol': 'VICA', 'amount': {'is_exact': True, 'exact': '5000', 'display': '5000.000'}}"
        },
        {
            "date": "Nov 05, 2023",
            "description": "You deposited funds into your wallet.",
            "amount": "USDT {'token_symbol': 'USDT', 'amount': {'is_exact': True, 'exact': '150', 'display': '150.000'}}"
        },
        {
            "date": "Nov 01, 2023",
            "description": "You deposited funds into your wallet.",
            "amount": "ETH {'token_symbol': 'ETH', 'amount': {'is_exact': True, 'exact': '10', 'display': '10.000'}}"
        }
    ]
}

首先注意到amount字段是字符串格式的伪JSON（使用单引号而非标准JSON的双引号），需要先将其转换为可解析的JS对象，再提取目标数据。

1. 编写工具函数解析amount字段 #

const parseAmount = (amountStr) => {
  // 分离币种符号和后面的对象字符串
  const [coinSymbol, objStr] = amountStr.split(' ', 2);
  // 将单引号替换为双引号，转为标准JSON格式
  const validJsonStr = objStr.replace(/'/g, '"');
  // 解析为JS对象
  const amountObj = JSON.parse(validJsonStr);
  return {
    coinSymbol,
    displayAmount: amountObj.amount.display
  };
};

2. 修改表格渲染逻辑 #

调用工具函数提取数据，调整表格列的内容：

<TableContainer>
  <Table variant="simple">
    <Thead>
      <Tr>
        <Th>日期</Th>
        <Th>币种</Th>
        <Th>交易金额</Th>
      </Tr>
    </Thead>
    <Tbody>
      {userWalletData.transactions.map((info, index) => {
        const { coinSymbol, displayAmount } = parseAmount(info.amount);
        return (
          <Tr key={index}>
            <Td>{info.date}</Td>
            <Td>{coinSymbol}</Td>
            <Td>{displayAmount}</Td>
          </Tr>
        );
      })}
    </Tbody>
  </Table>
</TableContainer>

额外建议 #

如果后端能直接将amount字段返回为标准JSON对象（而非字符串），会更稳妥，避免字符串解析可能出现的错误。理想的后端返回结构应为：

"amount": {
  "token_symbol": "ETH",
  "amount": {
    "is_exact": true,
    "exact": "-10",
    "display": "-10.000"
  }
}

这种情况下无需字符串解析，直接通过info.amount.token_symbol和info.amount.amount.display即可获取数据。

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