How to create a recursion in pug with creating a list from an object?

Question

JavaScript

Given an object

{
  "label": "蟆",
  "children": [
    {
      "label": "虫"
    },
    {
      "label": "莫",
      "children": [
        {
          "label": "艹"
        },
        {
          "label": "旲",
          "children": [
            {
              "label": "日"
            },
            {
              "label": "大"
            }
          ]
        }
      ]
    }
  ]
}

Theoretically, this object can be shorter, longer, or even empty.
This object reveals what small hieroglyphs a large hieroglyph consists of.
And further to the end of which smaller hieroglyphs a small hieroglyph consists.

Passing data from node.js to pug

Should work

<ul>
    <li>蟆
       <ul>
        <li>虫</li> 
        <li>莫
              <ul>
              <li>艹</li> 
              <li>旲
                      <ul>
                      <li>日</li> 
                      <li>大</li> 
                      </ul>
                  </li> 
              </ul>
          </li> 
       </ul>
    </li>
</ul>

https://jsfiddle.net/xreider/j4bmhv3z/2/

I feel it smells fried) And it's time to move to ejs. But maybe someone can help?

Answer 1

For example, like this, as an option

-
 var obj = {
  "label": "蟆",
  "children": [
    {
      "label": "虫"
    },
    {
      "label": "莫",
      "children": [
        {
          "label": "艹"
        },
        {
          "label": "旲",
          "children": [
            {
              "label": "日"
            },
            {
              "label": "大"
            }
          ]
        }
      ]
    }
  ]
 }

mixin unpackKanji(obj)
  if(Array.isArray(obj))
    each item in obj
      +unpackKanji(item)
  else
    ul
      if(obj.children)
        li=obj.label
            +unpackKanji(obj.children)
      else
          li=obj.label

+unpackKanji(obj)