插入從API中獲取的數據到靜態網站的表格

我有一個使用Hugo構建的靜態網站和一個表格，我正在顯示來自本地數據文件的數據並添加來自API的某些值以完成此數據：插入從API中獲取的數據到靜態網站的表格

<table id="markets-table"> 
    <thead> 
     <tr> 
     <th>Asset</th> 
     <th>Year</th> 
     <th>Market Cap</th> 
     <th>Price</th> 
     <th>Industry</th> 
     <th>Type</th> 
     <th>Description</th> 
     </tr> 
    </thead> 
    <tbody> 
     {{ $dataAssets := getJSON "https://api/v1/ticker/" }} 
     {{ range $.Site.Data.assets }} 
      <tr> 
       <td>{{ .name }}</td> 
       <td>{{ .year }}</td> 
       {{ range where $dataAssets "name" .name }} 
       <td>${{ lang.NumFmt 0 .market_cap_usd }}</td> 
       <td>${{ lang.NumFmt 2 .price_usd }}</td> 
       {{ else }} 
       <td>N/A</td> 
       <td>N/A</td> 
       {{ end }} 
       <td>{{ .industry }}</td> 
       <td>{{ .type }}</td> 
       <td>{{ .description }}</td> 
      </tr> 
     {{ end }} 
    </tbody> 
    </table>

然後，我使用datatables來使此表可排序，可過濾和可搜索。

這一切工作正常，但我的數據設置在構建時間和靜態，我希望來自API的值是動態/「實時」。

我可以通過使用axios或jQuery.ajax（）發出請求來獲取數據，但我不確定如何將其整合到我的表並保持清潔。

如果有些東西在我的情況下更有意義，我願意切換到不同的工具/表格插件。

感謝您的幫助！

來源

2017-10-13 Alex

Hugo的唯一目的是生成靜態內容。您可以從數據庫和遠程數據庫查詢生成內容，但它始終是靜態的。靜態內容很容易被搜索引擎索引，因此對搜索引擎友好。

一個可能的解決方案和一個SEO友好的解決方案是每次數據更新時在服務器上生成內容。但是，如果您的數據不會經常更改，那麼使用此解決方案非常理想，例如每天一次，您不介意在短時間內陳舊內容，因爲您必須應對另一個涉及瀏覽器的令人煩惱的問題緩存和設置響應頭。

來源

2017-10-13 19:18:57 Scriptonomy

事實上，我的內容主要是靜態的，這就是爲什麼我有興趣知道是否以及如何使用JavaScript將靜態數據添加到我的表中已有的靜態數據。例如，我希望每隔5分鐘更新一次價格和市值，因此每隔幾分鐘重建一次似乎不是一個合理的解決方案，並且將過時的價格值超過幾分鐘也不是一種選擇。 – Alex

插入從API中獲取的數據到靜態網站的表格

回答

相關問題