Recursive iteration over an object in Jade template?

Tom picture Tom · Nov 13, 2011 · Viewed 7.1k times · Source

I have an object of mixed type properties - some strings, some arrays of strings, some objects containing arrays of strings - that can potentially go many levels deep.

I would like to iterate over all properties so that an object creates a div, an array creates a div, and a string property creates a span to contain the text.

{ "string" : "some text", "object" : { "array" : [ "text" ] } }

The above object would render as:

<span>some text</span>
<div>
  <div>
    <span>text</span>
  </div>
</div>

But usually much more complex structures. How should I go about accomplishing this is Jade?

Answer

mna picture mna · Feb 10, 2012

It's been a while since you asked, but mixin is your friend, I think. I haven't tried it out, but if mixins support recursion, this should work:

mixin parseObject(obj)
  div
    - each val, key in obj
      - if (typeof val === 'string')
        span #{val}
      - else if (typeof val === 'object')
        mixin parseObject(val)

Then in the body of your .jade file, call mixin parseObject(rootObject).