Data Template: Issue with rendering content

[mueen]

I am using this example I found on github: GitHub - colmjude/hugo-data-template-tutorial

This is my JSON content: JSON Blob | 976078075460861952

I saved this JSON file in: /data/one/source.json

I modified 2 files in the example above. The modified content is. project-root/layouts/verbs/list.html:

{{ define "main" }}
<ul>
{{ range .Data.Pages }}
    <li>
      <a href="{{ .Permalink }}">{{ .Title }}</a>
    </li>
{{ end }}
</ul>

{{ end }}

and project-root/layouts/verbs/single.html:

<!-- Data is in /data/one/source.json -->
{{ define "main" }}
<div class="nested-copy-line-height lh-copy f4 nested-links nested-img mid-gray">
        {{ .Content }}
</div>
        <h2>Data</h2>
        {{ range (index .Site.Data.one .File.BaseFileName).ayas }}

<!-- sura_name -->
<p>{{ .identifier.sura_name }}</p>
<!-- everything from 'theme' -->
<p>{{ .theme.chapter }}</p>
<p>{{ .theme.topic }}</p>
<p>{{ .theme.subtopic }}</p>
<!-- [aya][text] -->
<p>{{ .aya.text | safeHTML}}</p>
<!-- [aya][translation] -->
<p>{{ .aya.translation | safeHTML}}</p>
{{ end }}

{{ end }}

What works: the list.html page

What doesn’t work: clicking on any page in list.html. The pages just return blank. No content whatsoever.

My goal is to render each JSON document as its own HTML page containing some data extracted from each JSON document.

[regis]

To this day Hugo cannot generate pages from data but it’s coming… Pages from data, take 5 · Issue #6310 · gohugoio/hugo · GitHub

There are a few workarounds, including this one which uses data from an API, but the same would apply for local data.

[mueen]

but I don’t understand. That example allows the content to be generated from the JSON.

There appears to be some bug in my HTML file(I think?) which isn’t rendering the data.

Or am I missing something fundamental in understanding how this works?

[regis]

@mueen

My goal is to render each JSON document as its own HTML page containing some data extracted from each JSON document.

The workaround suggested solves that if your problem is different then I failed to understand your message.

[mueen]

Here is the fix. In single.html change it to:

{{ range .Site.Data.verbs }}
    {{ range .ayas }}

Move the JSON to: /data/verbs/source.json

Then create an MD file that matches the name of the JSON: project-root/content/verbs/source.md and add this to the file:

---
title: "source"
---

The content should render.