JSON from /data with keys and values in html

support
1

I have a JSON file in /data. Let’s say it has poems. It is structured like this.

[
{“1”: "Hola . . . . "},
{“2”: “mundo! . . . .”},
{“kitten”: "como etsas . . . "}
]

As of now I have a partial that reads from .Site.Data.poems and can print out the values, so

<p>Hola</p>
<p>mundo!</p>
<p>como estas</p>

which is great. But I want to be able to have a partial that, for example, renders this by selecting the third document in the array.

<h5>kitten</h5>
<p>como estas</p>

Or, in other words, I want to be able to get the strings on both the left and right sides of the colon into a partial.

I am fairly new to Go and positively wet behind the hears to Hugo, so my apologies, but I’ve gone over the docs and am too dim to suss this out yet. Any help is greatly appreciated.

2

I’m a little confused by your use of JSON. I would normally use consistant keys:

[
  {"title": "1", "content": "Hola gato"},
  {"title": "2", "content": "mundo!"},
  {"title": "kitten", "content": "como estas"}
]

Then the partial template would look like this:

<h5>{{ .title }}</h5>
<p>{{ .content }}</p>

Does this work for you? If not, I’d like to see the relevant sections of your templates to see how you’re ranging over the data and calling the partial.

3

Fair point. Obviously that’s not exactly the JSON file I’m working with, but it still begs the question. What if I wanted

<h5>kitten</h5>
<p>El gato naranja</p>

on one page and then on the next page

<h5>1</h5>
<p>Hola!</h5>

So, again just as an example, every time a page is loaded/refreshed I want to pick one of 25 quotes I have in a JSON file, and have it styled as the subtitle of the nav bar. Is the only/preferred way to do this loading javascript or maybe writing some simple Go and then using the ‘native’ hugo server? That’s fine if it’s so, I’m just trying to figure out the best hammer to break the rock.

Thanks much for responding,

  • TCB
4

Hugo is a static site generator.

5

Indeed, and an excellent one. And I think I have my answer. Thanks much.

6

@Thad_Brown although Hugo is a static site generator, you might better be served using some client-side AJAX if you’re looking for results to be “random” and change each time the page refreshes but have the URL remain consistent. I wouldn’t eliminate Hugo as a good solution just yet.

7

Absolutely, I’m not giving up on anything. I very much appreciate that Hugo does what it does extremely well. I’m just trying to figure out how to use it to its greatest effect. All good, thanks for the advice.

8

Although it IS static … if you rebuild at intervals you can get some randomnes. Use the search and you should find some tips.

9

All good here. Thanks. No worries. Carry on without me.