后台json数据已经获取成功到前台JS中，求怎么在页面上能显示父子关系的DIV格式JS拼接语句？

var data=[
{ID: "1", PId: "0", Name: "大类1"},
{ID: "2", PId: "1", Name: "小类a"},
{ID: "3", PId: "1", Name: "小类b"},
{ID: "4", PId: "1", Name: "小类c"},
{ID: "5", PId: "0", Name: "大类2"},
{ID: "6", PId: "5", Name: "小类1"},
{ID: "7", PId: "5", Name: "小类2"},
{ID: "8", PId: "5", Name: "小类3"},
]

页面上有个

 <div id="content"></div>

希望使用

求怎么循环数组拼接，让页面div变成需求的这样父子关系div，如下

<div class="layui-tab">
  <ul class="layui-tab-title">
    <li class="layui-this">大类1</li>
    <li>大类2</li>
    <li>大类3</li>
    <li>大类...</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">小类a,小类b,小类c</div>
    <div class="layui-tab-item"> 小类1,小类2,小类3</div>
    <div class="layui-tab-item">大类3的子菜单内容</div>
    <div class="layui-tab-item">对于大类下子菜单内容...</div>
  </div>
</div>

先把数据处理成，层级的数据。然后递归循环

1、最不想的办法
先取一级
遍历一级，取二级
遍历二级，取三级

你这大类小类写在一个数组里，要想单独拿出来很麻烦，干嘛不写在两个数组里

就是希望能处理成2个数组就好办，不知道怎么处理，这两个数组父子关系，显示在对应的DIV里