js把后端返回的数组类型(不具有树形结构但有关联性)处理为树形结构

最新推荐文章于 2023-12-19 14:32:48 发布
最新推荐文章于 2023-12-19 14:32:48 发布
阅读量570 收藏 4
点赞数 1
分类专栏： vue JavaScript 文章标签： javascript vue.js html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47284756/article/details/120099299
版权

js把后端返回的数组类型(不具有树形结构但有关联性)处理为树形结构

当我们做树形图时例如element ui tree组件
我们所需要的数据格式是这样的

  children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],

具有父集和子集环环相套
但是有的时候后端返回的格式可能是这样的

data: function () {
    return {
      infotree: [
        {
          iD: "",
          index: 0,
          parentIndex: -1,
          name: "世界",
          type: "EPT_Folder",
        },
        {
          iD: "",
          index: 1,
          parentIndex: 0,
          name: "地形倾斜",
          type: "EPT_Folder",
        },
        {
          iD: "",
          index: 2,
          parentIndex: 1,
          name: "拉卜楞镇地形3DT20210129ALL",
          type: "EPT_Scene",
        },
        {
          iD: "",
          index: 3,
          parentIndex: 1,
          name: "",
          type: "EPT_Scene",
        },
        {
          iD: "",
          index: 4,
          parentIndex: 1,
          name: "夏河影像202102260117_3DT",
          type: "EPT_Scene",
        },
        {
          iD: "",
          index: 5,
          parentIndex: 1,
          name: "兰州市地形L17_20210722",
          type: "EPT_Scene",
        },
        {
          iD: "",
          index: 6,
          parentIndex: 1,
          name: "甘肃省影像20210812",
          type: "EPT_Scene",
        },
        {
          iD: "",
          index: 7,
          parentIndex: 1,
          name: "L19地形影像_20210722",
          type: "EPT_Scene",
        },
           {
          iD: "",
          index: 8,
          parentIndex: -1,
          name: "L19地形影像_20210722",
          type: "EPT_Scene",
        },
           {
          iD: "",
          index: 9,
          parentIndex: 8,
          name: "L19地形影像_20210722",
          type: "EPT_Scene",
        },
           {
          iD: "",
          index: 10,
          parentIndex: 9,
          name: "L19地形影像_20210722",
          type: "EPT_Scene",
        },
      ],
    };
  },

后端把所有的数据都返回来了 数据之间有关联性
此数据就是 对象中parentIndex 就是他父级的index并且第一级的index是等于-1的
那么我们就可以写了
先处理一下第一级

    //最后新的数组
    let NewMenu = [];
    let that = this;
    //获取第一级 根据parentIndex==-1
    for (let index in this.infotree) {
      if (this.infotree[index].parentIndex == -1) {
        NewMenu.push(this.infotree[index]);
      }
    }

现在我们第一级就已经出来了
然后我们需要定义一个函数,从第一级一层一层的往下添加数据

//循环的方法
    //第一个参数 需要插入子集的那个数组
    //第二个参数 总数据 (在这里 就是后端返给我们的数据 this.infotree)
    circulation(data, bigdata) {
      let that = this;
      //循环需要插入子集的那个数组
      for (let index in data) {
      	//我们需要先判断他到底有没有下一级才能把他的下一级插入进去
      	//所以我们要定义另外一个函数 isHaveChildren
        //返回值 isHaveChildren.isHave 是否有下一级
        //返回值 isHaveChildren.children 下一级
        let isHaveChildren = that.isHaveChildren(
          data[index].index,
          that.infotree
        );
        //如果有下一级
        if (isHaveChildren.isHave) {
          //下一级内容为 isHaveChildren.children
          data[index].children = isHaveChildren.children;
          //再次走这里
          //是因为我们不知道到底有几层
          //所以我们要判断我的下一级是否还有下一级所以再次调用这个函数
          that.circulation(data[index].children, that.infotree);
        }
      }
    },

判断是否有下一级的函数

    //第一个参数 父级的index 因为我们数据的parentIndex  就是父级的index
    //第二个参数 需要判断的数据也就是 总数据 (在这里 就是后端返给我们的数据 this.infotree)
    isHaveChildren(index, data) {
      //默认没有下一级
      let isHave = false;
      let that = this;
      //下一级
      let children = [];
      for (let index1 in data) {
        //用父级index和数据对比 如果有就是有下一级
        if (data[index1].parentIndex == index) {
          //有下一级
          isHave = true;
          //把这个下一级push到我们定义的 存放下一级的数组里
          children.push(data[index1]);
        }
      }
      //return 出去 
      //isHave就是是否有下一级
      //children就是下一级
      return {
        isHave,
        children,
      };
    },

经过这一系类的判断 插入
最后得到的结果就是这样
请添加图片描述
完整代码

<template></template>

<script>
export default {
  data: function () {
    return {
      infotree: [
        {
          iD: "",
          index: 0,
          parentIndex: -1,
          name: "世界",
          type: "EPT_Folder",
        },
        {
          iD: "",
          index: 1,
          parentIndex: 0,
          name: "地形倾斜",
          type: "EPT_Folder",
        },
        {
          iD: "",
          index: 2,
          parentIndex: 1,
          name: "拉卜楞镇地形3DT20210129ALL",
          type: "EPT_Scene",
        },
        {
          iD: "",
          index: 3,
          parentIndex: 1,
          name: "",
          type: "EPT_Scene",
        },
        {
          iD: "",
          index: 4,
          parentIndex: 1,
          name: "夏河影像202102260117_3DT",
          type: "EPT_Scene",
        },
        {
          iD: "",
          index: 5,
          parentIndex: 1,
          name: "兰州市地形L17_20210722",
          type: "EPT_Scene",
        },
        {
          iD: "",
          index: 6,
          parentIndex: 1,
          name: "甘肃省影像20210812",
          type: "EPT_Scene",
        },
        {
          iD: "",
          index: 7,
          parentIndex: 1,
          name: "L19地形影像_20210722",
          type: "EPT_Scene",
        },
           {
          iD: "",
          index: 8,
          parentIndex: -1,
          name: "L19地形影像_20210722",
          type: "EPT_Scene",
        },
           {
          iD: "",
          index: 9,
          parentIndex: 8,
          name: "L19地形影像_20210722",
          type: "EPT_Scene",
        },
           {
          iD: "",
          index: 10,
          parentIndex: 9,
          name: "L19地形影像_20210722",
          type: "EPT_Scene",
        },
      ],
    };
  },
  async mounted() {
    let NewMenu = [];
    let that = this;
    //获取第一级 根据parentIndex==-1
    for (let index in this.infotree) {
      if (this.infotree[index].parentIndex == -1) {
        NewMenu.push(this.infotree[index]);
      }
    }
    //循环
    this.circulation(NewMenu, this.infotree);
    //处理之后的
    console.log(NewMenu);
  },

  methods: {
    //循环的方法
    //第一个参数 需要插入的地方
    //第二个参数 总数据
    circulation(data, bigdata) {
      let that = this;
      //循环要插入的地方
      for (let index in data) {
        //返回值 isHaveChildren.isHave 是否有下一级
        //返回值 isHaveChildren.children 下一级
        let isHaveChildren = that.isHaveChildren(
          data[index].index,
          that.infotree
        );
        //如果有下一级
        if (isHaveChildren.isHave) {
          //下一级内容为 isHaveChildren.children
          data[index].children = isHaveChildren.children;
          //再次走这里
          that.circulation(data[index].children, that.infotree);
        }
      }
    },
    // 判断是否有子集
    //第一个参数 父级的id
    //第二个参数 需要判断的数据
    isHaveChildren(index, data) {
      //默认没有下一级
      let isHave = false;
      let that = this;
      //下一级
      let children = [];
      for (let index1 in data) {
        //用父级id和数据对比 如果有就是有下一级
        if (data[index1].parentIndex == index) {
          isHave = true;
          children.push(data[index1]);
        }
      }
      return {
        isHave,
        children,
      };
    },
  },
};
</script>

<style>
</style>

在这里插入图片描述
点个关注支持一下我吧
在这里插入图片描述

操作系统，数据结构，网络，python，go，web.zip
01-01
2. 树形结构：如二叉树、堆、AVL树、红黑树等。二叉树每个节点最多有两个子节点，常用于搜索和排序；堆是具有特定性质的完全二叉树，可用于优先队列；AVL树是自平衡的二叉搜索树，保证查找效率；红黑树是另一种自...
算法和数据结构：我针对不同算法和数据结构的自定义代码解决方案，以及来自Leetcode和Hackerrank的解决问题的解决方案。 用JavaScript实现
02-12
- 堆：一种特殊的树形数据结构，用于实现优先队列。 - 图：用于表示对象之间的关系，如邻接矩阵和邻接表。 3. **LeetCode和HackerRank**：这两个平台提供了大量的编程挑战，涵盖了多种算法和数据结构题目。通过...
后端返回自定义数组类型数据
寨板p45黑苹果10.12.6
05-29 495
返回数据形式：[{“id”:1,“text”:“联想”},{“id”:3,“text”:“三星”},{“id”:2,“text”:“华为”},{“id”:5,“text”:“OPPO”},{“id”:4,“text”:“小米”},{“id”:9,“text”:“苹果”},{“id”:8,“text”:“魅族”},{“id”:6,“text”:“360”},{“id”:10,“text”:“VIVO”},{“id”:11,“text”:“诺基亚”},{“id”:12,“text”:“锤子”}] 对应数据表形式
后端返回数组型字符串（json串），使用eval() 函数将其转为真实数组
qq_40639028的博客
08-30 1387
{ code:0, data:"[{name: \"uuid\",label: \"ID\",status:'0'},\r\n{name: \"projectNum\",label: \"项目编码\",status:'0'}\r\n]" } 利用eval()将字符串型数组，转化为真实数组。 eval() 函数可以计算某个字符串，并执行其中的的 JavaScript 代码。 var newArr = eval('(' + res.data+ ')'); 最后得到： [ .
后端返回数组对象（id重复）来去重并保留第一个
Q378532364的博客
03-16 1062
后端返回数组对象（id重复）来去重并保留第一个1 var arr = [ { id: "0001", name: "张三" }, { id: "0001", name: "李四" }, { id: "0002", name: "李6" }, { id: "0004", name: "李7" }, { id: "0002", na...
js按顺序循环接口返回数据，组合成新数据
最新发布
qq_35946021的博客
12-19 1085
现在vue项目里有个字典接口，改页面很多地方要调用字典接口，需要写个循环将字典值和接口返回数据对应。方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。循环要遍历的数组，调用上面方法，将数据填充到dictlist。有时候我们需要根据一个参数通过接口返回的数据进行一一对应。调用字典接口，回调字典列表。
js将后端返回的数据动态添加到table中
qq_38687751的博客
10-29 9158
为了解决最近遇到的将后端数据inforesult（数组）动态添加到table中的问题 触类旁通，把后端判断去掉就可以本地测试（自己建一个数组，已正确加载，测试通过） 先建立一个table 加载页面时调用函数 window.onload = function(){ ClassifyContents(); } js如下function ClassifyContents()
【Python树结构实战】：3步将关系型数据库数据转为树形JSON
!...# 1. 树形结构的理论基础 ## 1.1 树形结构定义与特性 ...树形结构由节点（Node）和边（Edge）组成，具有以下特点： - **根节点**：树的最顶层节点，它是整个树的起始点。 - **子节点**：根节点直接连接的节点称为子
【JS树结构数据的扁平化处理】：树转数组，一步到位
[【JS树结构数据的扁平化处理】：树转数组，一步到位](https://media.geeksforgeeks.org/wp-content/cdn-uploads/20230726162247/Array-data-structure.png) # 1. 树结构数据扁平化的基础概念 ## 1.1 树结构概述 树...
【JS中树结构的动态构建】：JSON数据到树状结构的快速搭建
在 JavaScript 中，树形结构作为一种高级数据结构，承担着组织、存储和检索信息的重要角色。由于其层次性和分支特性，树结构在多种场合下都显得尤为关键，特别是在需要对数据进行快速分类和层次化展示时。本章将探讨...
过滤后端返回的数组每条连续重复一遍问题
菜鸡奋斗ing的博客
06-16 768
刚碰到问题以及解决办法的思路： 后端返回的数组变成类似[{1,1},{1,1},{2,2},{2,2},{3,3},{3,3}.....] 每条数据后面都跟前面一条一模一样。 现在我们要过滤掉每重复的数据只留一条。结果：[{1,1},{2,2},{3,3}....]$scope.filterRepeatArray = function(datas){ var data =
js中数组for循环调用后端接口，返回数据填充入数组
永恩&猫咪的博客
12-06 5513
问题 一般来说 我们for循环调用后端接口， 数组需要返回的数据填充，但是返回后 发现 数组中的数据并没有接口返回的数据， 本人在vue项目中就遇到了这个问题，比如 test(arr) { for (let i = 0; i < (arr.length - 1); i++) { let url = arr[i].dataUrl; if (url != null) { let data = this.getData(url);
vue 重塑数组之 修改数组指定index的值
AIfurture的博客
08-27 992
vm.items[indexOfItem] = newValue vue不能检测数组的变动 想要实现可以使用vue的set方法 this.$set(this.items,indexOfItem,newValue);
后端返回不同数据类型的不同获取方式
weixin_45207113的博客
09-30 1780
1，问题介绍 在项目开发过程中，后端返回的数据封装类型多种多样，而我们前端则需要根据不同的返回数据列表提取出我们需要的数据。因此，需要掌握不同返回数据样式的不同获取方法。 本文中主要介绍后端返回【字符串数组】和【对象】的前端数据处理方式，作为积累。 2，问题背景 在项目进行【原料索证】功能时，此时后端返回的时一个对象，与之前返回的字符串数组不同，需要更改获取和处理方式。 2.1 字符串数组返回 ...
处理后端返回数据
Guojun19900715的博客
08-28 367
处理后端返回数据及对数据类型的判断
【JS树状数据遍历入门】：掌握JSON与树结构转换，解锁前端新技能
[js遍历树结构json数据结构](https://media.geeksforgeeks.org/wp-content/cdn-uploads/iddfs2.png) # 1. 树状数据结构与JSON概述 ## 树状数据结构与JSON的定义 在计算机科学中，树状数据结构是一种将信息以层次...
Extjs 无限树菜单 后台拼接json
10-20
树形菜单是一种以节点和层级关系展示数据的控件，每个节点可以有子节点，形成一棵倒置的树状结构。在Web应用中，这种菜单常用于组织大量有层次的数据，如文件系统、组织架构或导航菜单。 在ExtJS中，实现无限树菜单...
js组装网页数据
qq_36521848的博客
12-16 146
很多时候获取后台数据需要拼接到网页上，这里提取一段公用代码，方便后面需要时使用。
js 将后端返回的对象转换为数组
m0_71835253的博客
12-06 892
在实际开发中,后端返回的数据结构可能不是我们想要的,这个时候就需要转换了。这只是一种方式,最后的办法是跟后端协商。想要的数组,这个时候就需要转换一下了。
java后端返回前端树形结构_使用js将后台返回的数据转换成树形结构
weixin_32892145的博客
02-27 510
var list = [{ id: 1, name: '1'`},`{ id: 2, name: '2'`},`{ id: 3, parentId: 1, name: '1.3'`},`{ id: 4, parentId: 1, name: '1.4'`},`{ id: 5, parentId: 3, name: '1.3.5'`}`];var tree = [{id: 1,name: '1'`,...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值