如何循环JSON对象在HTML表格中渲染数据并解决循环失效问题

你的代码存在几个关键错误，导致循环渲染表格的逻辑失效，以下是具体问题和修正方案：

错误分析 #

• 数据源引用错误：代码中result.qy的result未定义，实际需要遍历的数据源是data.response.result.qy
• 不必要的嵌套遍历：你错误地对整个data对象使用$.each，但data是顶层JSON对象，遍历它只会拿到response这一个键值对，完全偏离了要遍历qy数组的目标
• 字段访问层级混乱：在遍历data时尝试访问value.result.qy[i]，结构层级完全错误，应该直接访问qy数组里的每一项属性

修正后的代码 #

HTML部分（无需修改） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <table class="table table-bordered table-striped" id="market_data">
        <tr>
            <th>ti</th>
            <th>ok_e</th>
            <th>type</th>
            <th>code</th>
            <th>ok_conversion_table_ti</th>
            <th>base_uom</th>
            <th>base_qty</th>
            <th>status</th>
            <th>created_by</th>
            <th>creation_datetime</th>
        </tr>
        
      </table>
</body>
</html>

JavaScript方案一：for循环遍历 #

$(document).ready(function(){
    $.getJSON("data.json",function(data){
        var market_value = '';
        // 拿到需要遍历的qy数组
        const qyList = data.response.result.qy;
        // 遍历数组每一项
        for( var i = 0 ; i < qyList.length; i++ ){
            const item = qyList[i];
            market_value += '<tr>';  
            market_value += `<td>${item.ti}</td>`;
            market_value += `<td>${item.ok_e}</td>`;
            market_value += `<td>${item.type}</td>`;
            market_value += `<td>${item.code}</td>`;
            market_value += `<td>${item.ok_conversion_table_ti}</td>`;
            market_value += `<td>${item.base_uom}</td>`;
            market_value += `<td>${item.base_qty}</td>`;
            market_value += `<td>${item.status}</td>`;
            market_value += `<td>${item.created_by}</td>`;
            market_value += `<td>${item.creation_datetime}</td>`;
            market_value += '</tr>';
        }
        // 所有行拼接完成后一次性追加到表格，提升性能
        $('#market_data').append(market_value);
    });
});

JavaScript方案二：$.each遍历（更简洁） #

$(document).ready(function(){
    $.getJSON("data.json",function(data){
        var market_value = '';
        // 直接遍历qy数组
        $.each(data.response.result.qy, function(index, item){
            market_value += '<tr>';  
            market_value += `<td>${item.ti}</td>`;
            market_value += `<td>${item.ok_e}</td>`;
            market_value += `<td>${item.type}</td>`;
            market_value += `<td>${item.code}</td>`;
            market_value += `<td>${item.ok_conversion_table_ti}</td>`;
            market_value += `<td>${item.base_uom}</td>`;
            market_value += `<td>${item.base_qty}</td>`;
            market_value += `<td>${item.status}</td>`;
            market_value += `<td>${item.created_by}</td>`;
            market_value += `<td>${item.creation_datetime}</td>`;
            market_value += '</tr>';
        });
        $('#market_data').append(market_value);
    });
});

关键优化点 #

• 直接定位到data.response.result.qy数组，这才是需要遍历的目标数据
• 遍历数组时，每一项就是包含所有字段的对象，直接访问对象属性即可
• 使用模板字符串（${}）替代传统字符串拼接，代码更易读维护
• 所有行拼接完成后一次性追加到表格，比循环内多次追加更高效

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