Paul White
Paul White

Reputation: 11

Jade - Nested for loop for navigation with sub-menu

I'm trying to use jade alongside harpjs to create a navigation menu with submenu items.

The current json (located in public._data) looks like this:

"navigation" : {
  "index": {
    "title": "Home",
    "slug": "index.html",
    "subitems":{}
  },
  "products" : {
    "title": "Products",
    "slug": "#",
    "subitems": {
      "example": {
        "title" : "example",
        "slug" : "example.html"
      }
    }
  },
 etc. etc. etc.
}

Using jade I'm able to successfully loop over the json for the top-level items e.g.,:

ul
  - for item in public._data.navigation
    li 
      a(href="#{item.slug") #{item.title}

But I'm at a loss for how to loop over the subitems within this looped item... i.e.:

ul
  - for item in public._data.navigation
    li 
      a(href="#{item.slug") #{item.title}
    ul
      - for subitem in item.subitems
      li(href="#{subitem.slug}") #{subitem.title}

Any idea what I'm doing wrong here?

Thanks all!

Upvotes: 1

Views: 671

Answers (0)

Related Questions