Accessing data from resource and passing it JS

support
1

So piggybacking on my previous issues of late, I have another question. In one context in my project I am accessing JSON data in the data folder and all is well there. However I want to be able to use that same data in my JS that gets run in the browser.

I am using js.Build to concatenate various files as well as using Node modules from Cloudinary to process images.

I want to be able to read that JSON file in my data folder (in its default location) and pass data from my thedata.json file into one of my javascript files to then be delivered and run in the browser. Somthing like this:

<!-- footer.html -->
...
{{ $utils := resources.Get "js/utils.js" }}
{{ $ct := resources.Get "js/ct.js" }}

{{ $script := slice $ct $utils  | resources.Concat "js/main.js" }}
{{ $built := $script | js.Build }}
...

<footer>
...
</footer>
<script src="{{ $built.RelPermalink }}"></script>

Here is where I want to bring in JSON:

...
// ct.js
import * as data from './thedata.json';
console.log(data);
...

A sample version of my JSON:

{
  "data": [
    {
      "asset_id": "theID",
      "public_id": "example",
      "format": "jpg",
      "version": 1717609302,
      "resource_type": "image",
      "type": "upload",
      "created_at": "2024-06-04T18:36:56Z",
      "bytes": 685828,
      "width": 3724,
      "height": 2096,
      "backup": true,
      "asset_folder": "name",
      "display_name": "example",
      "url": "http://bobo.com/example.jpg",
      "secure_url": "https://http://bobo.com/example.jpg",
      "context": {
        "custom": {
          "alt": "things",
          "drawing": "pen"
        }
      },
      "last_updated": {
        "context_updated_at": "2024-06-05T17:45:16+00:00",
        "tags_updated_at": "2024-06-05T18:50:31+00:00",
        "updated_at": "2024-06-05T18:50:31+00:00"
      }
    }
],
}

And here is the Hugo error:

ERROR Rebuild failed: JSBUILD: failed to transform "/js/main.js" (text/javascript): Unexpected end of file in JSON

This seems like a simple path/route thing, but I’m stumped. Again. All help is much appreciated.

2

Was your previous issue resolved?

3

@jmooring Yes it was, Thank you! I felt this one was, albeit, related a bit different.

4

Is this your structure?

assets/
└── js/
    ├── ct.js
    └── utils.js
data/
└── thedata.json

If yes…

layouts/partials/footer.html

{{ $utils := resources.Get "js/utils.js" }}
{{ $ct := resources.Get "js/ct.js" }}

{{ $script := slice $ct $utils | resources.Concat "js/main.js" }}

{{ $params := dict "data" site.Data.thedata.data }}
{{ $opts := dict "params" $params }}
{{ $built := $script | js.Build $opts }}

<footer>
THE FOOTER
</footer>
<script src="{{ $built.RelPermalink }}"></script>

assets/js/ct.js

import params from "@params";
console.log(params.data);

Try it:

git clone --single-branch -b hugo-forum-topic-50231 https://github.com/jmooring/hugo-testing hugo-forum-topic-50231
cd hugo-forum-topic-50231
hugo server

Then open your browser’s dev tool console to view the result.

1 Like
5

@jmooring your exmaple works and fits my usecase. The only difference here is my folder structure:

themes
 └──blank
    └──assets/
       └── js/
           ├── ct.js
           └── utils.js
data
└── thedata.json

When I shunt your example into my project, I get an array of objects. Exactly what I was looking for.

Thanks for your continued support!

1 Like
6

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.