# JSON file not accessible in JS

**URL:** <https://discourse.gohugo.io/t/json-file-not-accessible-in-js/45534>\
**Category:** support\
**Created:** [July 30, 2023, 3:49pm UTC](https://discourse.gohugo.io/t/json-file-not-accessible-in-js/45534 "2023-07-30T15:49:26Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![pgersl](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/pgersl/32/19440_2.png) [@pgersl](https://discourse.gohugo.io/u/pgersl)\
**Post date:** [July 30, 2023, 3:49pm UTC](https://discourse.gohugo.io/t/json-file-not-accessible-in-js/45534/1 "2023-07-30T15:49:26Z")

</div>

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:

```auto
[
    {{- 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:

```auto
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](https://github.com/pgersl/personal-website-tbd)

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [July 30, 2023, 4:01pm UTC](https://discourse.gohugo.io/t/json-file-not-accessible-in-js/45534/2 "2023-07-30T16:01:32Z")

</div>

You have not:

- Defined an output format in your site configuration
- Set which page kinds should use that output format

---

<div class="post-metadata">

**Author:** ![pgersl](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/pgersl/32/19440_2.png) [@pgersl](https://discourse.gohugo.io/u/pgersl)\
**Post date:** [July 30, 2023, 4:25pm UTC](https://discourse.gohugo.io/t/json-file-not-accessible-in-js/45534/3 "2023-07-30T16:25:21Z")

</div>

Should adding this to the `config.toml` file help?

```auto
[output]
    home = ['HTML', 'JSON', 'RSS']
    page = ['HTML']

```

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [July 30, 2023, 4:37pm UTC](https://discourse.gohugo.io/t/json-file-not-accessible-in-js/45534/4 "2023-07-30T16:37:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![pgersl](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/pgersl/32/19440_2.png) [@pgersl](https://discourse.gohugo.io/u/pgersl)\
**Post date:** [July 30, 2023, 4:42pm UTC](https://discourse.gohugo.io/t/json-file-not-accessible-in-js/45534/5 "2023-07-30T16:42:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [July 30, 2023, 5:06pm UTC](https://discourse.gohugo.io/t/json-file-not-accessible-in-js/45534/6 "2023-07-30T17:06:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![pgersl](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/pgersl/32/19440_2.png) [@pgersl](https://discourse.gohugo.io/u/pgersl)\
**Post date:** [July 30, 2023, 5:16pm UTC](https://discourse.gohugo.io/t/json-file-not-accessible-in-js/45534/7 "2023-07-30T17:16:12Z")

</div>

It’s there.

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [July 30, 2023, 6:48pm UTC](https://discourse.gohugo.io/t/json-file-not-accessible-in-js/45534/8 "2023-07-30T18:48:53Z")

</div>

#### Front matter

Remove the `layout` key/value pair from front matter. Specify this value only when you need to override the [template lookup order](https://gohugo.io/templates/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](https://gohugo.io/templates/base/) 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](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…

```auto
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.

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [July 30, 2023, 7:11pm UTC](https://discourse.gohugo.io/t/json-file-not-accessible-in-js/45534/9 "2023-07-30T19:11:36Z")

</div>

This multilingual scaffold/example might be helpful:

```plaintext
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

```

---

<div class="post-metadata">

**Author:** ![pgersl](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/pgersl/32/19440_2.png) [@pgersl](https://discourse.gohugo.io/u/pgersl)\
**Post date:** [July 30, 2023, 8:12pm UTC](https://discourse.gohugo.io/t/json-file-not-accessible-in-js/45534/10 "2023-07-30T20:12:29Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [August 1, 2023, 8:13pm UTC](https://discourse.gohugo.io/t/json-file-not-accessible-in-js/45534/11 "2023-08-01T20:13:13Z")

</div>

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