<view class="goods-category custom-class">
  <c-sidebar custom-class="custom-sidebar" bindchange="onParentChange" activeKey="{{activeKey}}">
    <c-sidebar-item
      wx:for="{{ category }}"
      wx:key="index"
      title="{{ item.name }}"
      disabled="{{ item.disabled }}"
    />
  </c-sidebar>
  <view class="goods-category__right">
    <c-tabbar
      wx:if="{{isSlotRight}}"
      activeKey="{{subActiveKey}}"
      bindchange="onChildChange"
      showMore
    >
      <slot/>
    </c-tabbar>
    <view wx:if="{{!isSlotRight}}" class="goods-category-normal">
      <view class="goods-category-normal-item" wx:if="{{category[activeKey].children && category[activeKey].children.length > 0}}">
        <block wx:for="{{category[activeKey].children}}" wx:key="index" wx:if="{{level === 3 && item.children && item.children.length > 0}}">
          <view class="flex goods-category-normal-item-title">
            {{item.name}}
          </view>
          <view class="goods-category-normal-item-container">
            <view
              class="goods-category-normal-item-container-item"
              wx:for="{{item.children}}"
              wx:for-index="subIndex"
              wx:key="subIndex"
              wx:for-item="subItem"
              bindtap="changCategory"
              data-item="{{subItem}}"
            >
              <t-image src="{{subItem.thumbnail}}" t-class="image" />
              <view class="flex goods-category-normal-item-container-item-title">
                {{subItem.name}}
              </view>
            </view>
          </view>
        </block>
        <view class="goods-category-normal-item-second-container" wx:if="{{level === 2}}">
          <block wx:for="{{category[activeKey].children}}" wx:key="index">
            <view
              class="goods-category-normal-item-second-container-item"
              wx:for-key="index"
              bindtap="changCategory"
              data-item="{{item}}"
              data-index = "{{item.index}}"
            >
              <t-image src="{{item.thumbnail}}" t-class="image" />
              <view class="flex goods-category-normal-item-container-item-title">
                {{item.name}}
              </view>
            </view>
          </block>
        </view>
      </view>
    </view>
  </view>
</view>

我想请问下，我的wxml如何修改出现如上图的效果啊，读取的是json文件，但是wxml不晓得咋调试，不太熟悉，就是根据多个数据组可以展示如右侧效果。

var json = [
    { 
      groupId: '24948',
      name: '奥特曼',
      thumbnail:
        'https://cdn-we/category-default.png',

       children: [
        {
          groupId: '249481',
          name: '构件111',
          thumbnail:
            'https://cdn-we/category-default.png',
          children: [
            {
              groupId: '249480',
              name: '1111',
              thumbnail:
                'https://hncdiwtcl-A1%E6%AA%90%E9%93%B8%E9%92%A2%E7%B3%BB%E8%88%B9%E6%9F%B1.jpg',
            },  
{
              groupId: '249480',
              name: '1111',
              thumbnail:
                'https://hncdiwtcl-A1%E6%AA%90%E9%93%B8%E9%92%A2%E7%B3%BB%E8%88%B9%E6%9F%B1.jpg',
            }, 
{
              groupId: '249480',
              name: '1111',
              thumbnail:
                'https://hncdiwtcl-A1%E6%AA%90%E9%93%B8%E9%92%A2%E7%B3%BB%E8%88%B9%E6%9F%B1.jpg',
            },                            
          ],       
        },      
      ],
     children: [
        {
          groupId: '249481',
          name: '构件222',
          thumbnail:
            'https://cdntegory/category-default.png',
          children: [
            {
              groupId: '249480',
              name: '2222',
              thumbnail:
                'https://hncdiwE6%8C%A1%E6%AA%90%E9%93%B8%E9%92%A2%E7%B3%BB%E8%88%B9%E6%9F%B1.jpg',
            },  
{
              groupId: '249480',
              name: '2222',
              thumbnail:
                'https://hncdiwE6%8C%A1%E6%AA%90%E9%93%B8%E9%92%A2%E7%B3%BB%E8%88%B9%E6%9F%B1.jpg',
            }, 
{
              groupId: '249480',
              name: '2222',
              thumbnail:
                'https://hncdiwE6%8C%A1%E6%AA%90%E9%93%B8%E9%92%A2%E7%B3%BB%E8%88%B9%E6%9F%B1.jpg',
            }, 
{
              groupId: '249480',
              name: '2222',
              thumbnail:
                'https://hncdiwE6%8C%A1%E6%AA%90%E9%93%B8%E9%92%A2%E7%B3%BB%E8%88%B9%E6%9F%B1.jpg',
            },                            
          ],       
        },      
      ],
     children: [
        {
          groupId: '249481',
          name: '构件333',
          thumbnail:
            'https://cdn-weault.png',
          children: [
            {
              groupId: '249480',
              name: '3333',
              thumbnail:
                'https://hn%8C%%BB%E8%88%B9%E6%9F%B1.jpg',
            },    
{
              groupId: '249480',
              name: '3333',
              thumbnail:
                'https://hncdiwE6%8C%A1%E6%AA%90%E9%93%B8%E9%92%A2%E7%B3%BB%E8%88%B9%E6%9F%B1.jpg',
            }, 
{
              groupId: '249480',
              name: '3333',
              thumbnail:
                'https://hncdiwE6%8C%A1%E6%AA%90%E9%93%B8%E9%92%A2%E7%B3%BB%E8%88%B9%E6%9F%B1.jpg',
            }, 
                         
          ],       
        },      
      ],
   },