使用javascript的数组路径的树结构 [英] Tree structure from array paths using javascript

问题描述

我得到了一个 json 结构，下面给出了一个 api，其中包含数组形式的相关子项的路径.例如这里是我的 json 结构

<预><代码>[{"name": "儿童 C1",小路": [一种"，乙",C"]},{"name": "儿童 C2",小路": [一种"，乙",C"]},{"name": "儿童 C3",小路": [一种"，乙",C"]},{"name": "儿童 B1",小路": [一种"，乙"]},{"name": "儿童 B2",小路": [一种"，乙"]},{"name": "儿童 A1",小路": [一种"]},{"name": "儿童 E1",小路": [丁"，E"]}]

这里的路径是一个孩子的路线.例如第一个对象意味着-一种-B-C- Childeren C1

等等.我正在使用只需要这种结构的树视图库

var tree=[{'姓名': 'A','孩子们': [{姓名: ''，孩子们: []}]}]

等等.我想将我的路径结构转换为树.需要帮助我可以用普通的 javasript 来实现.

谢谢

解决方案

var result=input.reduce((obj,el)=>{var orig=obj;for(el.path 的键){var found=obj.find(e=>e.name===key);如果(找到){obj=found.children;}别的{var temp={name:key, children:[]};obj.push(temp);对象=临时儿童；}}obj.push(el.name);返回原点；},[]);

http://jsbin.com/cowowisaji/edit?console

它创建了以下结构:

<代码>[{名称:"A",孩子们:[儿童A1"，{名称:B"，孩子:[...]}]}]

它只是遍历所有元素并通过在数组中搜索正确的路径对象来解析路径，如果路径元素不存在，则创建它.

上面的代码可以简写为:

var result=input.reduce((obj,el)=>(el.path.reduce((path,name)=>(path.find(e=>e.name==)name)||(path[path.length]={name:name,children:[]})).children,obj).push(el.name),obj),[]);

I am getting a json structure given below form an api which contains paths of related children in an array form . for example here is my json structure

[
  {
    "name": "Children C1",
    "path": [
      "A",
      "B",
      "C"
    ]
  },
  {
    "name": "Children C2",
    "path": [
      "A",
      "B",
      "C"
    ]
  },
  {
    "name": "Children C3",
    "path": [
      "A",
      "B",
      "C"
    ]
  },
  {
    "name": "Children B1",
    "path": [
      "A",
      "B"
    ]
  },
  {
    "name": "Children B2",
    "path": [
      "A",
      "B"
    ]
  },
  {
    "name": "Children A1",
    "path": [
      "A"
    ]
  },
  {
    "name": "Children E1",
    "path": [
      "D",
      "E"
    ]
  }
]

Here path is the route for a childeren. For example first object means -A -B -C - Childeren C1

and so on . I am using tree view library which requires only this structure

var tree=[
  {
    'Name': 'A',
    'children': [
      {
        Name: '',
        children: [

        ]
      }
    ]
  }
]

and so on. I want to convert my path structure to tree. Need help I can I achieve this with plain javasript.

Thanks

解决方案

var result=input.reduce((obj,el)=>{
 var orig=obj;
  for(key of el.path){
    var found=obj.find(e=>e.name===key);
    if(found){
      obj=found.children;
    }else{
      var temp={name:key, children:[]};
      obj.push(temp);
      obj=temp.children;
    }
 }
 obj.push(el.name);
return orig;
},[]);

http://jsbin.com/cowowisaji/edit?console

It creates the following structure:

[{
  name:"A",
  children:[
    "Children A1",
   {name:B", children:[...]}
  ]
}]

It simply iterates over all elements and resolves the path trough searching the right path object in an array, if a path element does not exist it creates it.

The upper code can be shortified to:

var result=input.reduce((obj,el)=>(el.path.reduce((path,name)=>(path.find(e=>e.name==name)||(path[path.length]={name:name,children:[]})).children,obj).push(el.name),obj),[]);

这篇关于使用javascript的数组路径的树结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！