Add JS to read values from public external JSON file

Hello. I am struggling to add an active Javascript function to my HUGO website. I see the function

My goal is that the value is fetched when the website is called, because the underlying JSON will be updated four or five times per day.
I already created a similar topic a few days ago:

While the GetRemote function worked, my understanding is that this will only update when building the website, not when it is called. If this should be a misunderstanding on my side, please accept my apologies.

This is the JSON file in an S3 bucket:
This is published.

In the JSON, I want to read value current_level (as a first step).

Right now, I have the following Javascript function

async function loadPegel() {
  try {
    const response = await fetch("");
    const current = await response.json();
    const currentLevel = current["current_level"];
    document.getElementById("current").innerText = currentLevel;
    return currentLevel;
  } catch (error) {
    console.error("Error loading Pegel:", error);
    return null; // or handle the error in a way that suits your needs

This is stored under

The shortcode is

This is where I add the JS: <br>
<script src="/js/1234_test.js"></script> <br>
But did this work?

stored under /layouts/shortcodes/1234_test.html

Within my post, I am including this shortcode as

## Current Level

{{< 1234_test >}}

When building the website, I see the my inputs are handled as

This is where I add the JS:
<script src="/js/1234_test.js"></script>
But did this work?

Unfortunately, I am struggling to debug this properly. I am not sure whether the JS itself is the issue or how I implement it.

Any inputs on this topic would be appreciated.

Not related to Hugo, I think. Check if your JS code is included in your HTML document using your browser’s developer tools. If it’s not, you must dig deeper. If it is, set a breakpoint at the top of your JS function and reload the page.

Hint: I doubt that anyone is calling your JS function. Use a DOMContentLoaded callback then that you define in your head template.

Again: none of this is related to Hugo. Therefore, other sites might be be better suited to help you.

Thank you for your feedback.
Agreed. I do not expect that anyone is debugging my JS here.

Right now, I am struggling to identify where the issue is. Is it Hugo or is it the JS?

From Hugo side, I would only like to verify

  • I am taking the right approach / setup (defining the JS, defining the Shortcode, calling it)?
  • Are there other (recommended) ways to implement JS in a Hugo website

JS is fetching the data. You are not using getJSON, so data is fetched whenever your JS is called ( via browser ) not via Hugo.

The way I would do it is get remote data using getJSON then manipulate data within template/shortcode. However, with this approach the JSON will be fetched only when Hugo build is run, but this method helps me manipulate data better within the templates.

If you want data to be fetched multiple times even if fetched via getJSON, you may setup recurrent site builds at your deployment platform at regular intervals as per your requirement.

1 Like

This is not a Hugo issue.

Read the hint above. Then read it again.

Sure. Will do.

Thank you for your response.
I think re-building my website four of five times per day is not a good approach. Not sure if costs would be an issue (I am using AWS amplify), but it feels wrong to deploy a whole website only to update a few values.
I will need to dive deeper into my Javascript function, I guess.