Data-driven menus?

support
1

Hello, I’m trying to put Hugo as frontend “on top” of a Drupal install (a.k.a “Headless CMS”).
I can retrieve the content of main-menu using

{{ $main_menu := getJSON "<path_to_endpoint>/menu/main-menu.json" }}

What I get is a json that looks like this:

{  
 name: "main-menu",
 tree: {
       FirstKey: {
                 link: {
                       title: "FirstTitle",
                       path: "collection/9",
                       weight: "0",
                       depth: "1",
                       has_children: "0",
                       ... other stuff ...
                 },
                 children: [ ]
       },
       SecondKey: {
                  link: {
                        title: "SecondTitle",
                        path: "collection/11",
                        weight: "1",
                        depth: "1",
                        has_children: "1",
                        ... other stuff ...
                  },
                  children: {
                     SecondSubKey: {
                                   link: {
                                         title: "Subtitle",
                                         path: "collection/73",
                                         weight: "0",
                                         depth: "2",
                                         ... other stuff ...
                                   },
                                   children: [ ]
                    }
                  }
       },
       ... other menu items ...
}

What I did (and it works):
Using a partial, I create the menu (haven’t implemented weight and children yet) like so:

<div class="navbar-collapse collapse" id="navigation">
                <ul class="nav navbar-nav navbar-right">
                {{ $main_menu := getJSON "<path_to_endpoint>/menu/main-menu.json" }}
                {{ $menupath := "a" }}
                {{- $menuitemname := "b" -}}
                {{- $menuitemweight := "0" -}}
                  {{ range $main_menu.tree }}
                    {{- $main_menu_item := . -}}
                    {{- range $key, $value := $main_menu_item.link -}}
                    {{- if eq $key "title" -}} {{- $.Scratch.Set $menuitemname . -}} {{- end -}}
                    {{- if eq $key "path" -}} {{- $.Scratch.Set $menupath . -}} {{- end -}}
                    {{- if eq $key "weight" -}} {{- $.Scratch.Set $menuitemweight . -}} {{- end -}}
                  {{- end -}}
                  <li class="dropdown">
                    <a href="{{$.Scratch.Get $menupath}}">{{$.Scratch.Get $menuitemname}}</a>
                  </li>
                  {{ end }}
                </ul>
            </div>

However, it would be far nicer to add the data retrieved via getJson to a variable.
Then add the whole structure to .Site.menus.main
And create the menu only afterwards …
Is this possible? I tried, using Scratch, no luck so far …

2

You need to fix the Markdown syntax to show your post correctly in the forum…

It is:

```
code
more code
```

Not:

```code
more code```
3

It doesn’t seem possible. But basically you are trying to hack Hugo here in a big way.

We cannot help. Your question is out of the scope of the Support Forum.

4

Sorry and thanks!
Old (a.k.a. Trello) habits die hard … :slight_smile:

5

Thanks.
I was only considering this because Hugo is, IMHO, probably one of the best “heads” to put on top of a “headless” CMS.
I’ll just stick to what I was able to produce so far as working code.