js 数组 转为树形结构

等级 833 0 0
标签: Javascript

需要转换为树形的数组

 var data = [
         {
            "orderById":null,
            "platformCommissionProportion":1,
            "name":"添加剂",
            "pid":13,
            "id":26,
            "state":"1"
        },
        {
            "orderById":null,
            "platformCommissionProportion":1,
            "name":"药食同源",
            "pid":13,
            "id":25,
            "state":"1"
        },
        {
            "orderById":null,
            "platformCommissionProportion":1,
            "name":"特殊食品",
            "pid":13,
            "id":24,
            "state":"1"
        },
        {
            "orderById":null,
            "platformCommissionProportion":1,
            "name":"进口食品",
            "pid":13,
            "id":23,
            "state":"1"
        },
        {
            "orderById":null,
            "platformCommissionProportion":1,
            "name":"新资源食品",
            "pid":13,
            "id":22,
            "state":"1"
        },
        {
            "orderById":null,
            "platformCommissionProportion":1,
            "name":"绿色有机",
            "pid":13,
            "id":21,
            "state":"1"
        },
        {
            "orderById":null,
            "platformCommissionProportion":1,
            "name":"食品检验检测",
            "pid":12,
            "id":20,
            "state":"1"
        },
        {
            "orderById":null,
            "platformCommissionProportion":1,
            "name":"标签审核",
            "pid":11,
            "id":19,
            "state":"1"
        },
        {
            "orderById":null,
            "platformCommissionProportion":1,
            "name":"法律服务",
            "pid":3,
            "id":18,
            "state":"1"
        },
        {
            "orderById":null,
            "platformCommissionProportion":1,
            "name":"案件咨询",
            "pid":3,
            "id":17,
            "state":"1"
        },
        {
            "orderById":null,
            "platformCommissionProportion":1,
            "name":"食品餐饮许可",
            "pid":2,
            "id":16,
            "state":"1"
        }
    ]

转换方法

/**
 * 树形数据转换
 * @param {*} data
 * @param {*} id
 * @param {*} pid
 */
export function treeDataTranslate (data, id = 'id', pid = 'pid') {
  var res = []
  var temp = {}
  for (var i = 0; i < data.length; i++) {
    temp[data[i][id]] = data[i]
  }
  for (var k = 0; k < data.length; k++) {
    if (temp[data[k][pid]] && data[k][id] !== data[k][pid]) {
      if (!temp[data[k][pid]]['children']) {
        temp[data[k][pid]]['children'] = []
      }
      if (!temp[data[k][pid]]['_level']) {
        temp[data[k][pid]]['_level'] = 1
      }
      data[k]['_level'] = temp[data[k][pid]]._level + 1
      temp[data[k][pid]]['children'].push(data[k])
    } else {
      res.push(data[k])
    }
  }
  return res
}

使用方法

// 引入上方的方法
import { treeDataTranslate } from '@/utils/myUtils'

treeDataTranslate(data)

js 数组 转为树形结构

收藏
评论区

相关推荐

js去除字符串
js去除字符串js<DOCTYPE html<html<head <title</title</head<body</body<script type"text/javascript" function delHtmlTag(str){   return str.replace(/<^/g,""); } var s
javascript实践教程-02-javascript入门
本节目标1. 掌握如何编写javascript代码。2. 掌握javascript的3个弹框。3. 掌握javascript的注释。4. 掌握浏览器的调试工具控制台。 内容摘要本篇介绍了如何在网页上编写js代码,如何引入外部js代码文件,js的3个弹框、注释语法,还有浏览器调试工具的控制台使用。阅读时间1520分钟。 script标签如果我们需要在网页中编写
Echarts
<!DOCTYPE html> <html>     <head>         <meta charset="utf-8" />         <title></title>     </head>     <body>         <div id="main" style="height:600px;width:500
JS 折线图
JS 折线图  echarts 折线图。需要引入:echarts.min.js <script src="${ctxStatic}/common/echarts.min.js" charset="utf-8" type="text/javascript"></script> JS调用后台方法,得到数据 Map<String, Obj
JSON学习笔记(二、语法)
#### JSON和js关系 欲学JSON先学js,那么JSON和js的关系是什么样的呢? .JSON 使用 JavaScript 语法来描述数据对象,但是 JSON 仍然独立于语言和平台。 .JSON 语法是 JavaScript 语法的子集 #### 基本语法 .数据在名称/值对中 .数据由逗号分隔 .大括号保存对象 .中括号保
JS导出页面为PDF文件,该如何操作?来看一眼就明白啦!
废话不多说,直接上代码。 1.资源文件或依赖 <script type="text/javascript" src="https://my.oschina.net//u/4265132/blog/4054317/js/canvg2.js"></script><script type="text/javascript" src="https://m
JS的常用属性
JS-------定义:基于事件和对象驱动,并具有安全性能的脚本语言。 引入:<script  type=”text/javascript”>具体js代码</script> <script  type=”text/javascript” src=”js文件”></script> 大小写敏感:例如:A与a是两个不同的东东 注释://  单
java中ajax的用法简单案例
1.index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="js/jquery-2.1.0.js">
D3.js selectAll()函数与enter()函数
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3 Test</title> <script type="text/javascript" src="d3.v3.js"></script> </head> <body>
Html5添加三联切换仿3D效果旋转木马jQuery插件教程
一、使用方法 <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/gallery.js"></script>    二、Html结构 <div id="wrapper"> <div id="mai
JQValidate使用说明
JQuery Validate使用总结: 一、导入js库 <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/jquery.validate.js" type="text/javascript"></script> 二、默认校验规则
JQuery
一、jq简介 jq其实就是js的一个文件。 二、jq书写步骤 1、先引入jq文件(min的文件) <script type="text/javascript" src="file:///C|/jquery/jquery-3.3.1.min.js"></script> 2、换新的一行写js代码 <script type="text/javascri
JavaScript prototype原型用法
JavaScript对象原型 -------------- 所有JavaScript对象都从原型继承属性和方法。 <!DOCTYPE html> <html> <meta charset="utf-8"> <title>js</title> <body> <h2>JavaScript 对象</h2
JavaScript基础知识
**1:从一个界面跳转到其他界面** window.location.href="b.html" **2:判断变量是否为空** typeof obj == 'undefined' || obj == null || obj == "" **3:html引用公用的css和js** <script type="text/javascript" src=
Springmvc异步上传文件
<script src="js/jquery.js" type="text/javascript"></script><script src="js/jquery.ext.js" type="text/javascript"></script><script src="js/jquery.form.js" type="text/javascript"