我可以在 html 表中获取只有正值的 json 吗答案

【问题标题】：can i fetch json in html table with positive value only我可以在 html 表中获取只有正值的 json 吗
【发布时间】：2022-12-20 02:17:23
【问题描述】：

我只想在 html 表中获取值大于 10 的 json api

这是我的代码和我的 java 脚本。我不希望 json 获取负值和只有 0 正值的值。，...有没有办法缩短它？

<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>Volome</th>
                <th>Change LTP</th>
                <th>OI Change</th>
                <th>OI</th>
              </tr>
            </thead>
            <tbody id="datapcr">
        
        <tbody>
      </table>
</div>
    <script>
    fetch("url").then(
        res => {
          res.json().then(
            data => {
            //   console.log(data.Algo);
              if (data.Algo.length > 0) {
      
                var temp = "";
                data.Algo.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;
              }
            }
          )
        }
      )</script>
</body>
</html>

【问题讨论】：

标签： html json api fetch

【解决方案1】：

就 API 的响应而言，这完全取决于您是否可以在 API 请求中提供过滤器，但是如果您只想过滤响应，则可以添加一个if 语句到您循环访问 API 响应数据的代码。

data.Algo.forEach((itemData) => {
    if (itemData.value > 10) {
        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;

现在，如果响应数据中的当前项的值大于 10，则临时 HTML 字符串只会添加一个新行。请注意，我刚刚使用了 itemData.value，但您可能希望将其更改为数据中需要的任何值要乐观。

【讨论】：

你好，你能帮我用红色和绿色给这个值上色吗……正值是绿色，负值是红色……我试过 css 不工作，我不能适应 javascript