Insert data fetched from API in a table on static website

support
#1

Greetings,
I have a table where I’m displaying data from a local datafile and adding certain values that come from an API to complete this data:

<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>

I then use datatables to make this table sortable, filterable and searchable.

This all works fine but my data is set at build time and static. I want the values coming from the API to be dynamic/“real-time”.

I can get the data by making a request using axios or jQuery.ajax() but I’m not sure how to integrate this to my table and keep it clean.

I’m open to switching to a different tool/table plugin if there’s something out there that makes more sense in my case.

How do you deal with mixing dynamic values to static data ?

Thanks for your help !

#2

If I understand what you’re looking to do correctly, you’ll need to do this in javascript - building and adding to the DOM.

Have a look on w3schools for some jquery examples

Hope this helps.

Saul