时间戳

首页 > 解决方案 > 使用 JavaScript 获取数据和标记 html 表的最有效方法

javascript - 使用 JavaScript 获取数据和标记 html 表的最有效方法

问题描述

我想用 html 表记录股票价格。

数据来自其他 REST API 服务器，我将每 2 秒获取一次此数据。

并且数据将在 HTML 表格上注明，价格单元也将每 2 秒更新一次。

我编码并且效果很好，但是我对这个 DOM 操作有疑问。（似乎不经济）

我的代码如下所示：

  1. 来自 REST API 服务器的 JSON 响应将如下所示：
[
 {"ticker": "stack", "price": "$3.4"},
 {"ticker": "over", "price": "$5.2"},
 {"ticker": "flow", "price": "$6.4"}
]
  1. HTML 表格如下所示：
<table>
 <tr>
  <th>TICKER</th>
  <th>PRICE</th>
 </tr>
 <tr>
  <td>STACK</td>
  <td id="stackPrice">$3.4</td>
 </tr>
 <tr>
  <td>OVER</td>
  <td id="overPrice">$5.2</td>
 </tr>
 <tr>
  <td>FLOW</td>
  <td id="flowPrice">$6.4</td>
 </tr>
</table>
股票代码 价格
堆 3.4 美元
超过 5.2 美元
流动 6.4 美元
  1. 在这种情况下，我的 JavaScript 代码如下所示。
function fetchAndNotateData(){
   fetch(apiURL, {
    method: "GET",
  })
  .then((res) => {
    return res.json();
  })
  .then((data) => {
    data.forEach(element => {
     document.getElementById(`${element.ticker}Price`).innerText = element.price; // seems inefficient 
    });
    setTimeout(fetchAndNotateData,2000);
  })
  .catch((err) => {
    console.log(err);
  });
}

在实践中，甚至还有 100 多个代码需要标注。

所以会有很多 DOM 操作（例如document.getElementById）。

并且在每个表格价格单元格上提供 id 似乎没有那么有效。

还有其他更有效的获取数据和标注表格的方法吗？（也许我需要服务器端渲染？）

标签： javascripthtml-tablefetch

解决方案

删除不包括标题的表格内容，例如

<table>
 <tr>
  <th>TICKER</th>
  <th>PRICE</th>
 </tr>
</table>

并将您的 ajax 更改为此。确保您已导入 jQuery

data.forEach(element => {

      $( "table" ).append( '<tr><td>'+element.ticker+'</td><td>'+element.price+'</td></tr>' );
           
    });

推荐阅读