如何仅将JSON API中值大于10的数据渲染到HTML表格？

要实现仅展示JSON API中值大于10且排除负数和0的数据，你需要在遍历数据前添加过滤逻辑，同时可根据需求选择过滤整行或隐藏单个不符合条件的单元格。以下是两种场景的具体修改方案：

场景1：直接过滤掉不符合条件的整行数据 #

如果希望完全排除包含负数、0或≤10值的行（可指定关键字段），修改JavaScript部分代码如下：

<html>
    <body>
<div class="container">
    
    <table class="table table-bordered" style="white-space:nowrap;"
     id="table1">
        <thead class="table-dark" style="white-space:nowrap;">
            <tr class="tr" style="white-space:nowrap;">
                <th>OI</th>
                <th>OI Change</th>
                <th>Volume</th>
                <th>Change LTP</th>
                <th>LTP</th>
                <th>Strike Price</th>
                <th>LTP</th>
                <th>Volume</th> <!-- 修正原代码中"Volome"的拼写错误 -->
                <th>Change LTP</th>
                <th>OI Change</th>
                <th>OI</th>
              </tr>
            </thead>
            <tbody id="datapcr"></tbody> <!-- 修正原代码未闭合的tbody标签 -->
      </table>
</div>
    <script>
    fetch("url").then(
        res => res.json()
    ).then(data => {
        if (data.Algo.length > 0) {
            var temp = "";
            // 先过滤数据：仅保留符合条件的行
            data.Algo.filter(itemData => {
                // 自定义过滤条件，示例要求多个核心字段均大于10
                // 可根据需求调整逻辑（比如用||表示只要有一个字段符合即可）
                return itemData.oi > 10 && 
                       itemData.oichange > 10 && 
                       itemData.vol > 10 && 
                       itemData.oi2 > 10 && 
                       itemData.oichange2 > 10 && 
                       itemData.vol2 > 10;
            }).forEach((itemData) => {
                temp += "<tr>";
                temp += "<td>" + itemData.oi + "</td>";
                temp += "<td>" + itemData.oichange + "</td>";
                temp += "<td>" + itemData.vol + "</td>";
                temp += "<td>" + itemData.changeltp + "</td>";
                temp += "<td>" + itemData.ltp + "</td>";
                temp += "<td>" + itemData.strike + "</td>";
                temp += "<td>" + itemData.ltp2 + "</td>";
                temp += "<td>" + itemData.changeltp2 + "</td>";
                temp += "<td>" + itemData.vol2 + "</td>";
                temp += "<td>" + itemData.oichange2 + "</td>";
                temp += "<td>" + itemData.oi2 + "</td></tr>";
            });
            document.getElementById('datapcr').innerHTML = temp;
        }
    }).catch(err => console.error('请求失败:', err));
    </script>
</body>
</html>

关键修改说明： #

• 使用Array.filter()在遍历前筛选数据，可自定义过滤规则（示例为多字段同时满足>10，可改为||实现单字段满足即保留）。
• 修复原代码中的拼写错误和标签闭合问题，提升代码规范性。
• 添加catch()处理请求异常，便于调试排查问题。

场景2：保留所有行，仅隐藏单元格中不符合条件的值 #

如果希望保留所有行，但仅显示单元格中>10的值，其余单元格留空，可修改单元格赋值逻辑：

// 在forEach循环中，对每个字段添加判断逻辑
temp += "<td>" + (itemData.oi > 10 ? itemData.oi : "") + "</td>";
temp += "<td>" + (itemData.oichange > 10 ? itemData.oichange : "") + "</td>";
// 其他字段按相同逻辑修改即可

说明： #

• 利用三元运算符条件 ? 显示值 : 空字符串，实现符合条件才显示内容。
• 可扩展判断条件（比如排除负数：itemData.oi > 0 && itemData.oi >10）。

内容的提问来源于stack exchange，提问作者I'm RamOP