如何获取JSON首个键值？以及如何用JavaScript/jQuery将嵌套JSON动态生成带表名的HTML表格

嘿，我来帮你搞定这两个问题！先从第一个简单的开始，再重点解决你生成表格的需求～

1. 如何获取JSON对象的第一个键值？ #

要拿到JSON对象的第一个键和对应的值，用Object.keys()方法就能轻松实现：

// 假设你的JSON对象是obj
const obj = { "Transaction Details": { /* ... */ } };
// 获取第一个键
const firstKey = Object.keys(obj)[0];
// 获取对应的值
const firstValue = obj[firstKey];

Object.keys(obj)会返回对象所有键组成的数组，取索引0的元素就是第一个键，再用这个键去对象里取值就OK啦。

2. 生成带标题的嵌套JSON转HTML表格 #

你的现有代码是处理数组或平级对象的，现在需要适配嵌套结构——把外层键作为表格标题，内层键值对作为表格内容。我帮你调整了代码，一步步来：

核心思路： #

• 先提取外层的"Transaction Details"作为表格标题
• 拿到内层的实际交易数据对象
• 用语义化的<caption>标签添加表格标题
• 提取内层的键作为表头，对应的值作为表格行内容

修改后的完整代码： #

// 你的嵌套JSON数据
const txnJson = { 
  "Transaction Details": { 
    "txnId":"TP20151515151S45", 
    "txnNo":"201548484848484", 
    "txnDate":"09-JAN-2021", 
    "txnStatus":"success" 
  } 
};

// 1. 获取表格标题和内层数据
const tableTitle = Object.keys(txnJson)[0];
const txnData = txnJson[tableTitle];

// 2. 提取内层的键作为表头列
const col = Object.keys(txnData);

// 3. 创建表格元素
const table = document.createElement("table");

// 4. 添加表格标题（用caption标签，语义化更友好）
const caption = document.createElement("caption");
caption.innerHTML = tableTitle;
table.appendChild(caption);

// 5. 创建表头行
const headerTr = table.insertRow(-1);
for (const key of col) {
  const th = document.createElement("th");
  th.innerHTML = key;
  headerTr.appendChild(th);
}

// 6. 创建数据行
const dataTr = table.insertRow(-1);
for (const key of col) {
  const td = document.createElement("td");
  td.innerHTML = txnData[key];
  dataTr.appendChild(td);
}

// 7. 把表格添加到目标容器
$('#Div<%=i%>').append(table);

代码说明： #

• 用Object.keys(txnJson)[0]准确拿到了外层的"Transaction Details"作为标题，解决了你之前尝试的问题
• 直接用Object.keys(txnData)提取内层所有键，不用嵌套循环，代码更简洁
• 用<caption>标签添加表格标题，既符合HTML语义化，又满足你把外层键作为表格名称的需求
• 因为内层是单个对象，不需要循环数组，直接遍历键值对生成表头和数据行就可以

这样生成的表格会有一个醒目的标题“Transaction Details”，表头是txnId、txnNo等字段，下面一行是对应的交易值，完全符合你的需求～

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