JS access to local .json files

support
1

I have a hugo site, displays a lot of tables, with data from local .json files, places in the data folder.

I run thru them, by using {{ range sort (index .Site.Data.boxes .Params.country “data”) “.city” }}
and then presenting the data fields, in a simple table.

My problem is that it pretty plain, and i have been looking at something a bit more nice and dynamic to look at.

I found http://tabulator.info and had it even working, with an external source, for the data.
My problem is, that i cannot get it to work, when i’m trying to access a local file, like in my example above.

Does anybody have an example, of getting data, from a local json file, and using it in JS, to display data ?

I’m no expert, on JS, and i’m really stuck, so hoping for some help, to point me in the right direction.

Thanks

/Robert

2

You might want to show more code. What is the content of our JSON file, what does the generated HTML look like? In general, it should be possible to style the HTML if you just want to have it to look “a bit more nice”.
Using a JS library just for that seems like a bit of overkill to me. Especially if you’re “no expert, on JS”.

3

I understand your request, but my problem is that i have it working in plain html, but i can’t get it to read the json file.

That is beyond the content of the json file.
The json file is located in the data folder.

So an example, of how to use a local file, in JS, is a good learning opportunity.

I seam to remeber having read, that js in hugo, and local files, can be an issue. So if i’m wrong, i would love to hear that, and if i’m right, then i’m thinking, some of you, have probably done something, that could point me in the right direction.

Thanks

/Robert

4

You can get data from a local JSON file with Hugo (that’s described in the documentation, and there’s an example online here GitHub - jochumdev/hugo-lightslider-example: Hugo with lightSlider and lightGallery integration.)

5

That was exactly, what i was looking for.

Thanks :slight_smile:

I really look at the documentation, and did not find that described, so if you have a link, i would love to see it.

Thanks

/Robert

6
7

There is no JS mentioned there.
This is what i’m using in my site today.

8

So what is your problem? If you can read tabular data from a JSON file and have it display in HTML, why not simply style it with CSS? That’s what it is for. What do you need JS for here?

Edit: There is in fact mention of JS in the example I pointed you to. Have a look at the shortcodes.

9

My problem is that i want something a bit more dynamic, and i might have other usecases in the future, that CSS can’t help me with.

But great if it’s in the shortcodes. I will look at it and see if i can make sense of it.
Thanks for pointing me in the right direction.

10

Place the JSON file in the static/ directory.

See:
https://gohugo.io/content-management/static-files/