Getting the indention of HTML (un)ordered lists right when using a recursive Jade mixin

Question

Say, I have an object that looks like this:

{
  "name" : "Home",
  "name" : "About",
  "Products" : {
    "name" : "Shoes",
    "name" : "Hats"
  }
}

Now I want to turn this object into an HTML unordered list. I tried using this recursive mixin:

mixin makeList( obj )
  ul
    each item in obj
      if typeof item === 'string'
        li= item
      else if typeof item === 'object'
        +makeList( item )

Using recursive mixins in Pag is powerful and easy, and most of the time, the outcome is what you need. However, in the case of unordered lists, it's not. This is the outcome:

<ul>
  <li>Home</li>
  <li>About</li>
  <ul>
    <li>Shoes</li>
    <li>Hats</li>
  </ul>
</ul>

This is how it should look like:

<ul>
  <li>Home</li>
  <li>About
    <ul>
      <li>Shoes</li>
      <li>Hats</li>
    </ul>
  <li>
</ul>

(Also see this conversation about proper nesting of lists in HTML.)

It seems like a trivial thing, but I can't get it right. Any help would be appreciated :)

score 1 · Answer 1 · answered Aug 19 '16 at 20:00

Simple. Just change your mixin code:

mixin makeList( obj )
    ul
    each item in obj
        li
          if typeof item === 'string'
            p item
          else if typeof item === 'object'
            +makeList( item )

Now, you create the li, then check the type of the object. This way anything, the content or a ul, will be nested in the li.

Getting the indention of HTML (un)ordered lists right when using a recursive Jade mixin

1 Answers1