How do I generate a table from data + bundle?

support
1

I am using Hugo to make an online catalog of sorts, all my products need lots of tables to explain the available variations, types, models, sizes…

So how I go making my single-page template for products load some json file related to the product name or folder and display it as table?

I want to know if I can do something similar to the “bundles”, and put json file either in the content folder or in a data folder with same structure and have refer to it as something like “.This.Data” or something instead of figuring how to build the whole path to the data folder to get the file.

1 Like
2

Yep, it’s possible. Since the JSON file would live inside a page bundle, instead of referring to it with site.Data.foo you would get the file as a page bundle resource then use its .Content

3

Cool! So how I do that? To be honest the Hugo manual in many things is quite obtuse, obscure or incomplete…

4

Happy Friday.

Given a JSON file at content/page-bundle/table.json

[
  {
    "animal": "dog",
    "sound": "woof"
  },
  {
    "animal": "cat",
    "sound": "meow"
  }
]

Then in layouts/_default/single.html have something like

{{ $json := .Resources.GetMatch "table.json" }}
{{ $animals := $json | transform.Unmarshal }}

<table>
  <thead>
    <tr>
      <th>Animal</th>
      <th>Sound</th>
    </tr>
  </thead>
  <tbody>
  {{ range $animals }}
    <tr>
      <td>{{ .animal }}</td>
      <td>{{ .sound }}</td>
    </tr>
  {{ end }}
  </tbody>
</table>
2 Likes
5

Thanks! It worked! No idea why though… I did some searching on the forums since my last post and found another post with similar question, and the code was almost identical, but didn’t work, most notable using only “.Get” would give funky errors.

Also lots of errors about unknown type and whatnot.

While debugging I reached a code almost identical as your example, but using your example working, while my code didn’t, and only difference as far as I know is using two lines instead of one to open the resource file…

6

Show the code you’re referring to

7

After I tried to edit it to rename some files, it broke again…

{{ $jsoncabecalho := .Resources.GetMatch "cabecalho.json" }}
{{ $cabeçalhotabela := $jsoncabecalho | transform.Unmarshal }}

These lines produce this error:

executing “main” at <transform.Unmarshal>: error calling Unmarshal: unknown format

The contents of the json file in question:

[{
    "id": "1",
    "nomecoluna": "coluna1"
}, {
    "id": "2",
    "nomecoluna": "coluna2"
}]
8

What hugo version are you on?

Also what text editor are you using?

9

found out a stray .md file was triggering the template, and it was trying to read non-existing files…

the surprising thing is that it worked once… when it shouldn’t have.

thank you for all the help :slight_smile:

now only trying to figure out what to do when I don’t know the column names (it might change for each product, the amount of columns might change too)