如何用jQuery的$.each循环基于嵌套JSON创建动态HTML表格

没问题，我来帮你搞定这个嵌套JSON转动态表格的需求！你已经用过$.getJSON处理简单数据了，这次嵌套结构只需要多一层处理逻辑就行，咱们一步步来：

第一步：准备基础HTML结构 #

先搭好带表头的空表格，tbody用来承载动态生成的分类行：

<table id="categoryTable" border="1">
  <thead>
    <tr>
      <th>Language 1</th>
      <th>Language 2</th>
      <th>Language 3</th>
    </tr>
  </thead>
  <tbody>
    <!-- 动态内容会插入这里 -->
  </tbody>
</table>

第二步：编写jQuery处理逻辑 #

我会用你的示例JSON数据来演示，实际项目里你可以把变量替换成$.getJSON的请求结果。核心思路是：遍历每个分类，先把该分类下的多语言文本按LanguageId整理成易查找的结构，再生成对应表格行：

// 示例嵌套JSON数据（实际项目中可以替换成$.getJSON的回调数据）
const categoryData = [
  { 
    "CategoryId": 1, 
    "CategoryTexts": [
      { "LanguageId": 1, "Description": "Netus.", "CreatedById": 1 },
      { "LanguageId": 2, "Description": "Elementum.", "CreatedById": 2 },
      { "LanguageId": 3, "Description": "Rhoncus!", "CreatedById": 3 }
    ], 
    "CreatedById": 1, 
    "IsActive": true 
  },
  { 
    "CategoryId": 2, 
    "CategoryTexts": [
      { "LanguageId": 1, "Description": "Aptent!", "CreatedById": 4 },
      { "LanguageId": 2, "Description": "Et.", "CreatedById": 5 },
      { "LanguageId": 3, "Description": "Pellentesque.", "CreatedById": 6 }
    ], 
    "CreatedById": 2, 
    "IsActive": true 
  }
];

// 等待DOM加载完成后执行
$(document).ready(function() {
  const $tbody = $('#categoryTable tbody');
  
  // 遍历每个分类
  $.each(categoryData, function(index, category) {
    // 把CategoryTexts转换成以LanguageId为键的对象，方便快速取值
    const textMap = {};
    $.each(category.CategoryTexts, function(i, text) {
      textMap[text.LanguageId] = text.Description;
    });
    
    // 构建表格行：对应三个语言的描述，缺失的话显示默认文本
    const row = `<tr>
      <td>${textMap[1] || '无内容'}</td>
      <td>${textMap[2] || '无内容'}</td>
      <td>${textMap[3] || '无内容'}</td>
    </tr>`;
    
    // 把行添加到tbody中
    $tbody.append(row);
  });
});

关键逻辑说明 #

• 文本映射处理：把CategoryTexts转成textMap对象，这样不用每次都循环查找对应语言的描述，提升效率，尤其是数据量大的时候。
• 容错处理：用|| '无内容'确保如果某个分类缺少某语言的文本时，单元格不会显示空白，你可以根据需求修改默认文本。
• 动态插入：通过append()把生成的行添加到表格主体，保持DOM操作的简洁性。

如果你的数据是通过$.getJSON获取的，只需要把上面的categoryData替换成请求回调里的data参数就行，比如：

$.getJSON('your-data-url.json', function(categoryData) {
  // 上面的遍历逻辑放到这里
});

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