JSON file not accessible in JS

support
1

Hello,

I am trying to implement a search function into my multilingual HUGO site, however, the simplest step proved to be not as simple as expected.

I have created a JSON file with this path /layouts/_default/search.json, and it looks like this:

[
    {{- range .Site.RegularPages -}}
    {
        "link": "{{ .RelPermalink }}",
        "title": "{{ .Title }}",
        "type": "{{ .Params.type }}",
        "search": "{{ .Params.search }}",
        "show": "{{ .Params.search }}"
    }
    {{- if not (last .Site.RegularPages) -}},{{- end -}}
    {{- end -}}
]

Now, I tried to access the JSON file in my JS (it’s not complete yet, I’ve stopped to troubleshoot), saved in /static/js/search.js and referenced in my head partial. This is the JS code:

const cardTemplate = document.getElementById('search-card-template');
const cardContainer = document.querySelector('.search-cards');

fetch('/search.json')
    .then(response => response.json())
    .then(data => {
        data.forEach(card => {
            const searchCard = cardTemplate.content.cloneNode(true).children[0];
            console.log(card)
        })
});

I am however getting a 404 Error: Not found for the JSON file. What might be the reason for that?

Github

2

You have not:

  • Defined an output format in your site configuration
  • Set which page kinds should use that output format
1 Like
3

Should adding this to the config.toml file help?

[output]
    home = ['HTML', 'JSON', 'RSS']
    page = ['HTML']
4

I suggest you test it yourself—great way to learn.

5

Hmm, I tried adding it and it still doesn’t work, that’s why I asked.

6

Please push your changes and I’ll have a look in a bit.

7

It’s there.

8

Front matter

Remove the layout key/value pair from front matter. Specify this value only when you need to override the template lookup order. Currently you have layout: single on content/en/articles/_index.md (a list page), which doesn’t make any sense.

Remove the type key/value pair from front matter. Specify this value only when you need to override the page type inferred from the top level directory name.

Layouts

Use the base/block structure to simplify your templates.

Create layouts/_default/list.html to handle section pages.

Site configuration: deprecated custom parameters on the language key

With version 0.112.0 and later, you must place per-language custom parameters under language.xx.params. See https://gohugo.io/content-management/multilingual/#changes-in-hugo-01120

You currently have language.xx.flag — move to language.xx.params.flag.

Site configuration: default content language settings

Move this…

defaultContentLanguage = "en"
defaultContentLanguageInSubdir = true

…above all the tables in your configuration file. It is currently under the [output] (sic, see below) table, which doesn’t make any sense.

Site configuration: output formats

The name of the table to specify which output formats to render for a give page kind is [outputs], not [output].

Next step

Fix all this stuff, push your changes, and then we’ll revisit your search problem.

9

This multilingual scaffold/example might be helpful:

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

I only fixed the [outputs] issue and I will leave everything else as is, it works fine now. The search also works. I will be making the repo private soon, so I could work further on my site without everybody looking. Thank you anyway.

11

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