CODEWITHSUNDEEP
recursiontemplate-enginepug
Tom
Tom

Reputation: 927

Recursive iteration over an object in Jade template?

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?

Upvotes: 14

Views: 7452

Answers (3)

mna
mna

Reputation: 23973

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).

Upvotes: 14

Sunrise
Sunrise

Reputation: 185

In the modern version of Jade it's look like

mixin parseObject( obj )
  div
    each val in obj
      if typeof val === 'string'
        span= val
      else if typeof val === 'object'
        +parseObject( val )

Then in the body of your .jade file, call

+parseObject( rootObject )

Upvotes: 7

Thijs Koerselman
Thijs Koerselman

Reputation: 23280

Recursion seems to be suppported now. I have successfully used the function with a minor tweak; you need to use the mixin keyword when calling the function. 

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

Upvotes: 7

Related Questions