如何将API返回的特殊格式JSON数据渲染为指定HTML格式？

步骤1：将二维数组转换为对象数组 #

先把API返回的rows二维数组和columns字段名映射成你熟悉的对象数组，让后续处理更直观：

// 模拟API返回的数据
const apiData = {
  columns: ['payee_name_refined', 'total'],
  rows: [
    ['CITIBANK NA', 99237716.31],
    ['JPMORGAN CHASE BANK', 45678901.23]
  ]
};

// 转换为对象数组
const formattedData = apiData.rows.map(row => {
  return apiData.columns.reduce((obj, key, index) => {
    obj[key] = row[index];
    return obj;
  }, {});
});

步骤2：格式化金额为美元格式 #

用浏览器原生的Intl.NumberFormat处理金额的千分位和美元符号，比手动拼接更可靠：

const formatCurrency = (amount) => {
  return new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  }).format(amount);
};

步骤3：渲染为指定格式的HTML #

遍历处理后的对象数组，生成对应的HTML内容并插入页面：

// 获取页面容器
const container = document.getElementById('payment-list');

// 生成HTML字符串
const html = formattedData.map(item => {
  return `<div class="payment-item">${item.payee_name_refined}, ${formatCurrency(item.total)}</div>`;
}).join('');

// 插入到页面
container.innerHTML = html;

完整可运行示例 #

把所有逻辑整合起来，直接运行就能看到效果：

<div id="payment-list"></div>

<script>
const apiData = {
  columns: ['payee_name_refined', 'total'],
  rows: [
    ['CITIBANK NA', 99237716.31],
    ['JPMORGAN CHASE BANK', 45678901.23],
    ['WELLS FARGO BANK', 12345678.90]
  ]
};

const formattedData = apiData.rows.map(row => {
  return apiData.columns.reduce((obj, key, index) => {
    obj[key] = row[index];
    return obj;
  }, {});
});

const formatCurrency = (amount) => {
  return new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  }).format(amount);
};

const container = document.getElementById('payment-list');
const html = formattedData.map(item => `<div>${item.payee_name_refined}, ${formatCurrency(item.total)}</div>`).join('');
container.innerHTML = html;
</script>

这个方案的优势：

• 原生API处理金额格式化，避免手动正则拼接的潜在bug
• 映射逻辑通用，后续columns字段变化时无需大幅修改代码
• 渲染逻辑简洁高效，直接生成HTML字符串插入页面

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