vue递归遍历Json树状数据

json数据格式，循环获取最后一层数据id

 // node 衫伍缺为所有数据及data，arr为最终得到的数组数据,调用函数前先获或辩取父级节点

recursion (node, arr) { 

    if (!node.children) { 

          //先判断 node节点是否含有children节点橘滑，为true 为最后一级，取id ，push到arr数组中

              arr.push(node.id)

      } else { 

           // false时 非最后一级，含有children，则继续循环children

            node.children.forEach(item =>this.recursion(item, arr))

      }

    }

1、方法思路使用js数组自带的filter()方法；数据格式要求，父子节点通过，Id，ParentId进行关联。默认父结节id为0。

样例数据：var jsonData = [{"id":"1","pid":"0","name":"家用电器"}, {"id"亮茄穗:"4","pid":"1","name":"大家电"}, {"id":"5","pid":"1","name":"生活电器"}, {"id":"2","pid":"0","name":"服饰"}, {"id":"3","pid":"0","name":"化妆"}, {"id":"7","pid":"4","name":"空调"}, {"id":"8","pid":"4","name":"冰箱"}, {"id":"9","pid":"4","name":"洗衣机"}, {"id":"10"纳腊,"pid":"敬卜4","name":"热水器"}, {"id":"11","pid":"3","name":"面部护理"}, {"id":"12","pid":"3","name":"口腔护理"}, {"id":"13","pid":"2","name":"男装"}, {"id":"14","pid":"2","name":"女装"}, {"id":"15","pid":"7","name":"海尔空调"}, {"id":"16","pid":"7","name":"美的空调"}, {"id":"19","pid":"5","name":"加湿器"}, {"id":"20","pid":"5","name":"电熨斗"}]

2、实现方法：

function creatTreeData(list){

var clonelist = JSON.parse(JSON.stringify(list))

var result =clonelist.filter(function(father){

var childlist = clonelist.filter(function(child){

return father.id= child.pid

})

if(childlist.length>0){

father.children=childlist

}

return father.pid ==0

})

return result

}

3、方法封装

function treeData(list,id,pid,children){

var clone = JSON.parse(JSON.stringify(list))

return clone.filter(function(father){

var childlist =clone.filter(function(child){

return father[id]==child[pid]

})

if(childlist.length>0){

father[children]=childlist

}

return father[pid]==0

})

}

信息在传递的过程中都需要加以标记，可通过标签的方式，比如HTML，也可以通过键值对的方式仿虚name:kang，kang这个信息被标记为name，一组带有标记的信息存储起来就成备竖燃了文档。

信息标记后有很多好处：

比如，HTML是超文本信息集(文本，声音，图像，视频)，是WWW的信息组织方式。HTML以标签的方式标记信息。

信息标记的形式有以下三种，XML，JSON，YAML。

一个XML文档内容如下：

JSON对象的好处是可以直接作为JavaScript对象进行使用，需要注意的是，JSON文件是不允许加注释的，否则会解析错误。一个JSON文件内容如下：

一个YAML文件内容如下：

以上三种文件的信息提取都需要解析器，比如通过bs4库的标签树进行遍历，但速度较慢。也可以直纤段接进行搜索，找到相关的信息。可借助正则表达式(re)来实现，bs4库和re库结合使用。

---