前端的数据分类-来自后台的json数组数据

最新推荐文章于 2022-12-16 14:50:52 发布
最新推荐文章于 2022-12-16 14:50:52 发布
阅读量851 收藏
点赞数
分类专栏： js vue 文章标签： 前端 分类 json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuan_618859/article/details/121340606
版权
js 同时被 2 个专栏收录
67 篇文章 1 订阅
订阅专栏
vue
49 篇文章 0 订阅
订阅专栏

将后台返回的数组，按照父子结构分类，并展示
如下为最简单的实现方法

需求：

后台返回数据
在这里插入图片描述
前端要展示的效果
在这里插入图片描述

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <title>Document</title>
  <style>
    *{
      padding: 0;
      margin: 0;
      box-sizing: border-box;
      list-style: none;
    }
    ul.tab{
      margin-bottom: 20px;
      display: block;
      overflow: hidden;
    }
    
    .tab li{
      width: 120px;
      float: left;
      text-align: center;
      border-bottom:1px solid #ccc;
      margin-left: 20px;
      height: 40px;
      line-height: 40px;
    }
    li.on{
      border-bottom:1px solid #69f;
    }
    .title{
     font-size: 18px; border: 1px solid #ccc;
     background-color: #ddd;
     margin-bottom: 10px;
     padding: 0 10px;
    }

    li{
      line-height: 40px;
    }

    .list{
      width: 500px;
      height: 500px;
      overflow: auto;
    }

  </style>
</head>
<body>

  <div id="app">
    <h2> {{msg}} </h2>
    <hr/>
    <div style="border: 1px solid #ddd; margin: 10px; padding: 20px; overflow: auto;">
      <ul class="tab">
        <li  v-for="(item,index) in allKind" :key="item.name" 
          :class="[index == currentIndex ? 'on':'']"
          @click="liClick(index)">
          {{item.name}}
        </li>
      </ul>
      <div class="list">
        <ul>
          <li v-for="(item,index) in currentList.children" :key="item.name">
            <div v-if="item.children && item.children.length>0">
              <div class="title">{{item.name}}</div>
              <ul v-for="(sub) in item.children" :key="sub.propertyname">
                <li>
                  <div v-if="sub.children && sub.children.length>0">
                    <div class="title">{{sub.propertyname}}</div>
                    <ul v-for="(son) in sub.children" :key="son.name">
                      <li>
                        无限循环 {{son.name}} {{ son.children }}
                      </li>
                    </ul>
                  </div>
                  <div v-else>{{sub.propertyname}}: 
                    <input />
                  </div>
                </li>
              </ul>
            </div>
            <div v-else>{{ item.name }}</div>
          </li>
        </ul>
      </div>
    </div>
  </div>


  <script>


    var obj =
      {
        "PropertyTypelist": "[{\"name\":\"属性\",\"propertyTypeName\":\"properties\"},{\"name\":\"类型\",\"propertyTypeName\":\"type\"}]",
        "dtT": [
          {
            "id": 36446732,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "properties",
            "propertySetName": "约束",
            "propertyname": "底部标高",
            "ifcurl": null,
            "provalue": "ROOF PLAN",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446733,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "properties",
            "propertySetName": "构造",
            "propertyname": "椽截面",
            "ifcurl": null,
            "provalue": "33615",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446734,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "properties",
            "propertySetName": "构造",
            "propertyname": "封檐板深度(m)",
            "ifcurl": null,
            "provalue": "0",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446735,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "properties",
            "propertySetName": "标识数据",
            "propertyname": "图像",
            "ifcurl": null,
            "provalue": "",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446736,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "properties",
            "propertySetName": "标识数据",
            "propertyname": "注释",
            "ifcurl": null,
            "provalue": "",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446737,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "properties",
            "propertySetName": "标识数据",
            "propertyname": "标记",
            "ifcurl": null,
            "provalue": "",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446738,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "properties",
            "propertySetName": "消防系统",
            "propertyname": "Rating",
            "ifcurl": null,
            "provalue": "",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446739,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "properties",
            "propertySetName": "阶段化",
            "propertyname": "创建的阶段",
            "ifcurl": null,
            "provalue": "New Construction",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446740,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "properties",
            "propertySetName": "阶段化",
            "propertyname": "拆除的阶段",
            "ifcurl": null,
            "provalue": "无",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446741,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "properties",
            "propertySetName": "标识数据",
            "propertyname": "设计选项",
            "ifcurl": null,
            "provalue": "主模型",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446742,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "properties",
            "propertySetName": "尺寸标注",
            "propertyname": "坡度(%)",
            "ifcurl": null,
            "provalue": "",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446743,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "properties",
            "propertySetName": "约束",
            "propertyname": "房间边界",
            "ifcurl": null,
            "provalue": "1",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446744,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "properties",
            "propertySetName": "编辑板形状",
            "propertyname": "弯曲边缘条件",
            "ifcurl": null,
            "provalue": "0",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446745,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "properties",
            "propertySetName": "约束",
            "propertyname": "与体量相关",
            "ifcurl": null,
            "provalue": "0",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446746,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "properties",
            "propertySetName": "尺寸标注",
            "propertyname": "厚度(m)",
            "ifcurl": null,
            "provalue": "",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446747,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "properties",
            "propertySetName": "约束",
            "propertyname": "自标高的底部偏移(m)",
            "ifcurl": null,
            "provalue": "-0.587375",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446748,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "properties",
            "propertySetName": "约束",
            "propertyname": "截断标高",
            "ifcurl": null,
            "provalue": "无",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446749,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "properties",
            "propertySetName": "约束",
            "propertyname": "截断偏移(m)",
            "ifcurl": null,
            "provalue": "0",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446750,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "properties",
            "propertySetName": "构造",
            "propertyname": "最大屋脊高度(m)",
            "ifcurl": null,
            "provalue": "2533.5357",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446751,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "properties",
            "propertySetName": "尺寸标注",
            "propertyname": "体积(m³)",
            "ifcurl": null,
            "provalue": "33.1137760661546",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446752,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "properties",
            "propertySetName": "尺寸标注",
            "propertyname": "面积(㎡)",
            "ifcurl": null,
            "provalue": "75.4351607655083",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446753,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "type",
            "propertySetName": "构造",
            "propertyname": "结构",
            "ifcurl": null,
            "provalue": "",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446754,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "type",
            "propertySetName": "图形",
            "propertyname": "粗略比例填充样式",
            "ifcurl": null,
            "provalue": "",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446755,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "type",
            "propertySetName": "图形",
            "propertyname": "粗略比例填充颜色",
            "ifcurl": null,
            "provalue": "8421504",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446756,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "type",
            "propertySetName": "构造",
            "propertyname": "默认的厚度(m)",
            "ifcurl": null,
            "provalue": "0.473075",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446757,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "type",
            "propertySetName": "标识数据",
            "propertyname": "类型图像",
            "ifcurl": null,
            "provalue": "",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446758,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "type",
            "propertySetName": "标识数据",
            "propertyname": "注释记号",
            "ifcurl": null,
            "provalue": "",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446759,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "type",
            "propertySetName": "标识数据",
            "propertyname": "型号",
            "ifcurl": null,
            "provalue": "",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446760,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "type",
            "propertySetName": "标识数据",
            "propertyname": "制造商",
            "ifcurl": null,
            "provalue": "",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446761,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "type",
            "propertySetName": "标识数据",
            "propertyname": "类型注释",
            "ifcurl": null,
            "provalue": "",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446762,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "type",
            "propertySetName": "标识数据",
            "propertyname": "URL",
            "ifcurl": null,
            "provalue": "",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446763,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "type",
            "propertySetName": "标识数据",
            "propertyname": "说明",
            "ifcurl": null,
            "provalue": "",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446764,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "type",
            "propertySetName": "标识数据",
            "propertyname": "部件说明",
            "ifcurl": null,
            "provalue": "Roof Construction",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446765,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "type",
            "propertySetName": "标识数据",
            "propertyname": "部件代码",
            "ifcurl": null,
            "provalue": "B1020",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446766,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "type",
            "propertySetName": "标识数据",
            "propertyname": "类型标记",
            "ifcurl": null,
            "provalue": "",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446767,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "type",
            "propertySetName": "标识数据",
            "propertyname": "成本",
            "ifcurl": null,
            "provalue": "",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446768,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "type",
            "propertySetName": "分析属性",
            "propertyname": "传热系数(U)(W/(m²．Ｋ）)",
            "ifcurl": null,
            "provalue": "14488.1889763779",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446769,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "type",
            "propertySetName": "分析属性",
            "propertyname": "热阻(R)((m²·K)/W)",
            "ifcurl": null,
            "provalue": "6.90217391304348E-05",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446770,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "type",
            "propertySetName": "分析属性",
            "propertyname": "热质量(KJ/K)",
            "ifcurl": null,
            "provalue": "3.571904727144",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446771,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "type",
            "propertySetName": "分析属性",
            "propertyname": "吸收率",
            "ifcurl": null,
            "provalue": "0.1",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446772,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "type",
            "propertySetName": "分析属性",
            "propertyname": "粗糙度",
            "ifcurl": null,
            "provalue": "1",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446773,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "properties",
            "propertySetName": "几何中心点",
            "propertyname": "X",
            "ifcurl": null,
            "provalue": "3492.494",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446774,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "properties",
            "propertySetName": "几何中心点",
            "propertyname": "Y",
            "ifcurl": null,
            "provalue": "-1206.23645",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446775,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "properties",
            "propertySetName": "几何中心点",
            "propertyname": "Z",
            "ifcurl": null,
            "provalue": "2533299.2121",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446776,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "properties",
            "propertySetName": "包围盒顶点坐标",
            "propertyname": "point 1",
            "ifcurl": null,
            "provalue": "-2019.306,-5651.2365,2533062.7242",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446777,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "properties",
            "propertySetName": "包围盒顶点坐标",
            "propertyname": "point 2",
            "ifcurl": null,
            "provalue": "9004.294,-5651.2365,2533062.7242",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446778,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "properties",
            "propertySetName": "包围盒顶点坐标",
            "propertyname": "point 3",
            "ifcurl": null,
            "provalue": "9004.294,3238.7636,2533062.7242",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446779,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "properties",
            "propertySetName": "包围盒顶点坐标",
            "propertyname": "point 4",
            "ifcurl": null,
            "provalue": "-2019.306,3238.7636,2533062.7242",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446780,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "properties",
            "propertySetName": "包围盒顶点坐标",
            "propertyname": "point 5",
            "ifcurl": null,
            "provalue": "-2019.306,-5651.2365,2533535.7",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446781,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "properties",
            "propertySetName": "包围盒顶点坐标",
            "propertyname": "point 6",
            "ifcurl": null,
            "provalue": "9004.294,-5651.2365,2533535.7",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446782,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "properties",
            "propertySetName": "包围盒顶点坐标",
            "propertyname": "point 7",
            "ifcurl": null,
            "provalue": "9004.294,3238.7636,2533535.7",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          },
          {
            "id": 36446783,
            "glid": "4523149",
            "externalId": "4523149",
            "propertyTypeName": "properties",
            "propertySetName": "包围盒顶点坐标",
            "propertyname": "point 8",
            "ifcurl": null,
            "provalue": "-2019.306,3238.7636,2533535.7",
            "modelName": "766218",
            "groupname": "基本屋顶",
            "MileageID": 16,
            "DocumentModel": "766218"
          }
        ]
      }
  

      var vm=new Vue({
      el: '#app',
      data:{
        msg: '标题',
        allKind: [],
        currentList: [],
        currentIndex: 0
      },
      mounted(){
        this.dealData();
      },
      methods:{
        liClick(index){
          console.log('index',index);
          this.currentIndex = index;
          this.currentList = this.allKind[index]
        },
        dealData(){
          let allKindArr;
          if(typeof obj.PropertyTypelist === 'string'){
            allKindArr = JSON.parse(obj.PropertyTypelist)
          }else{
            allKindArr = obj.PropertyTypelist
          }

          for (let i = 0; i < allKindArr.length; i++) {
            for (let j = 0; j < obj.dtT.length; j++) {
              if(obj.dtT[j].propertyTypeName == allKindArr[i].propertyTypeName){
                if(!allKindArr[i].data){
                  allKindArr[i].data = []
                }
                allKindArr[i].data.push(obj.dtT[j])
              }
            }
          }

          console.error('allKindArr',allKindArr);

          // 再次循环，对儿子分类
          for (let i = 0; i < allKindArr.length; i++) {
            let nameArr = []
            console.error('清空nameArr',nameArr.toString());
            
            for (let j = 0; j < allKindArr[i].data.length; j++) {
              let one = allKindArr[i].data[j]
              if(!nameArr.includes(one.propertySetName)){
                nameArr.push(one.propertySetName)
                console.log('nameArr：',nameArr.toString());
                let newKind = {
                  name: one.propertySetName,
                  children: [one]
                }
                if(!allKindArr[i].children){
                  allKindArr[i].children = []
                }
                allKindArr[i].children.push(newKind)
              }
              else{
                // 如果已经存在了
                // console.error('nameArr存在',j,nameArr.toString());
                let indx = nameArr.indexOf(one.propertySetName);
                console.log('indx',indx);
                allKindArr[i].children[indx].children.push(one)
              }
            }
          }
          
          this.allKind = allKindArr;
          // 默认第一个
          this.currentList = this.allKind[0];
          console.log('currentList',this.currentList);
        }
      }
    })
  </script>
  
</body>
</html>

以上为最简单的实现方法：其实：

最佳实现方法： 组件递归

对于这种无限循环的内容，最好采用vue的组件递归的方法，就能轻松适应了。不管后台返回多少层，都能循环渲染出来。
如果对vue的组件递归方法有兴趣的，可以自己百度，也可以加我微信号yizheng369聊喔。

yuanyi正
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端vue将普通数组转换为父子级的树形结构数组
xiaotiaoza的博客
12-07 654
前端vue将普通数组转换为父子级的树形结构数组
前端知识点-----父子组件的深入使用
qq_44973583的博客
07-06 928
调用自身组件
前端页面设置后台数据排序
游响云停专栏
07-31 2595
今天遇到一个需求，通过前端页面动态设置后台数据的排序，本来以为很容易，谁知花了一上午才实现，低估了，作为一个老程序，耻辱呀。 首先需要排序的数据库表中有一个字段，是int类型的。 先看效果图 主要是从三个地方入手来完成排序。 添加数据 第一添加数据的时候，把当前添加的数据的优先级设置为最大，逻辑是从数据库中取出最大的优先级，然后加一，赋值给当前数据 @RequestMapping("/addItem") @ResponseBody public ResponseData.
后端接受数组
weixin_42452839的博客
12-16 3030
java后端接受数组
前端常见的处理数据的一些方法
A_9888的博客
09-23 420
【代码】前端常见的处理数据的一些方法。
jQuery向后台传入json格式数据的方法
10-24
jQuery向后台传入json格式数据的方法主要涉及了前端技术中的jQuery库以及前端与后端的数据交互。在Web开发过程中，前后端交互是一个非常重要的环节，而JSON（JavaScript Object Notation）作为轻量级的数据交换格式...
springMvc 前端用json的方式向后台传递对象数组方法
10-18
尤其在处理对象数组的数据传递上，前端以JSON格式发送，后端通过注解@RequestBody来接收是一个非常高效的方法。 在上述文章中，我们看到了一个具体的例子，展示了如何通过JSON格式从前端JSP页面传递对象数组到...
AJAX和struts2传递JSON数组
12-05
在本场景中，我们将探讨如何使用AJAX来传递JSON数组，并在Struts2的Action中接收和处理这些数据。 首先，JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它易于人阅读和编写，同时也易于机器解析...
前端展示json数据，格式化，可折叠展开
05-12
在前端开发中，经常需要处理和展示JSON（JavaScript Object Notation）数据。JSON是一种轻量级的数据交换格式，因其简洁明了的语法和易于人阅读和编写，同时也能被机器轻易解析，故在Web应用中广泛应用。当JSON数据...
【Java基础】前端传一个数组或者集合后台怎么接受（案例详解）
Java后端技术栈
07-20 2万+
解答前端除了传一个集合外，还要传一个字符串或者数字等属性，我们创建一个VO对象来接受即可解决如上的问题。前后端传参，最重要的还是统一好对应的参数属性名称，传参方式等，提前确认好，开发效率会大幅提高。业务场景传入的集合代表要操作的数据，传入的字符串，字符串/数字不同走不同的业务逻辑等。你是否遇到过这样的问题，就是前端除了传一个集合外，还要传一个字符串或者数字等属性？我们可以debug查看一下入参，很清晰的可以看到前端传入的参数。业务场景一前端传对象的集合后端就用对应的list接受即可。...
ajax（jquery+json）实现前端无刷新分类管理演示
03-16
内容索引:.NET源码,Ajax相关,Ajax,Json　　这是一个典型的Ajax网页应用实例，采用jquery+json的Ajax方式，实例中从xml读取数据，由用户操作前端网页更新数据后保存，所有操作几乎都是在ajax的方式进行数据提交，操作界面友好。 学习Ajax的朋友，本示例不失为一个好范例。
前端对对象数组按照指定属性分类
qq_15798421的博客
07-13 627
前端对对象数组按照指定属性分类 后台给了一大串数组，希望前段自己根据属性来分类，写出了这个公共方法。 这是后台大哥给的数据，需要按照deviceType分类 自己写的处理方法 this.devObj = this.handleArrayClassification(res.data,'deviceType'); // 处理数组分类 data:分类的数组 label:按照分类的字段 handleArrayClassification(data:Array<any>,label:string)
移动端vue项目中前端对后台返回的数据按A-Z进行分类
Hello World
08-19 1128
结合vant的索引栏组件 需求：能够如图片（截图官方文档的）这样显示。并且由前端对返回的数据进行处理，按A-Z分类，并且对应字母的数据如果为空，则不显示字母，例如：I开头的数据为空，则不显示I索引栏 template模板中： <div class="indexBar"> <van-index-bar> <div v-for="(item, index) in classificationLettersList" :key="index">
实现按属性分类
weixin_41395548的博客
12-14 1998
在项目中，有时候后后端给的数据是繁杂无序的，所以前端需要分类 比如这样的数据： let arrs = [ {name:'javascript',type:'前端'}, {name:'html5',type:'前端'}, {name:'css3',type:'前端'}, {name:'Vue.js',type:'前端'}, {name:'java',type:'后端'}, {name:'php',type:'后端'}, {name:'python',type:'后端'}, {name:'pho
【前端学习 - JS （2）数据类型的分类】
weixin_60364883的博客
12-08 420
数据类型的分类： 1-1 基本类型： string（字符串）--原始类型 boolean（布尔值）--原始类型 number（数字）--原始类型 symbol（符号）--原始类型 null（空值） undefined（未定义） BigInt（BigInt数据类型的目的是比Number数据类型支持的范围更大的整数值，精度在(2^53-1)范围内，BigInt(10) 值为：10n） ES2020新出的 其中 Symbol 和 BigInt 是ES6 中新增的数据类型： Symbol 代表创.
js 将数据按需分类
Minyoung 的博客
12-10 657
classifyDemand 函数说明 该函可将数组按字段分类，并将字段或自定义名称作为索引便于查找，分类显示，大大提高了试图的遍历压力。 函数体 /** * @param arr 需要分类的数组 * @param value -> object | array * @param key -> string * @param nickName -> string *...
Java后台如何接收并处理前台传过来的json格式的数组参数
热门推荐
Sang
08-30 17万+
业务：jsp页面ajax传递json字符串传递到后台，实现功能。 环境：springmvc+spring+mybatis+jsp+js+css           maven+mysql springmvc配置文件配置返回json数据： 使用json版本： com.alibaba fastjson 1.2.3 jsp页面数据： js
json对象中的json数组 传到后台怎么接收
最新发布
04-06
当从后台传来json数组时，前端可以使用相应的语言解析该数据，将其转化为可操作的数据格式，比如JavaScript中可以使用JSON.parse()方法将json字符串转化为JavaScript对象数组进行处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值