关于不确认层数dom结构的拼写

后台给我个接口我要把他门用dom拼起来，是类似这个样子的

    <ul class="tree">
      <li><span>Category</span>
        <ul>
          <li><span class="active">jQuery</span>
            <ul>
              <li><span>jQuery</span></li>
              <li><span>jQuery UI</span></li>
              <li><span>jQuery Mobile</span></li>
            </ul>
          </li>
          <li><span>JavaScript</span>
            <ul>
              <li><span>AngularJS</span></li>
              <li><span>React</span></li>
              <li><span>Backbone</span></li>
            </ul>
          </li>
          <li><span>Golang</span></li>
        </ul>
      </li>
 </ul>

后台给的接口是这样的

return:
    ret: 0
    msg: ''
    data: {
        id: 0, 服务商id
        servicer_name: '', 服务商名称
        list: [
            {
                id: 0, 部门id
                name: '', 部门名称
                sub_department_list: [
                    {
                        id: 0, 部门id
                        name: '', 部门名称
                        sub_department_list: [
                            ...
                        ]
                    }
                ]
            }
        ]
    }

一个部门下可能有多个子部门，每个部门都可以添加子部门，现在的问题是我不知道到部门下面到底有多少层，怎么拼出完整的dom结构？

---

循环 list 的 每一个元素，如果是 sub_department_list, 进入一个递归调用函数。接下来是细节了。