从嵌套的集合模型javascript创建JSON

Create JSON from nested set model javascript

本文关键字：javascript 创建 JSON 模型 集合 嵌套      更新时间：2023-09-26

我有这样的数据结构，显示嵌套树中每个节点的深度：

[
  {
    "name": "ELECTRONICS",
    "depth": 0
  },
  {
    "name": "TELEVISIONS",
    "depth": 1
  },
  {
    "name": "TUBE",
    "depth": 2
  },
  {
    "name": "PLASMA",
    "depth": 2
  },
  {
    "name": "GAME CONSOLES",
    "depth": 1
  },
  {
    "name": "MP3 PLAYERS",
    "depth": 1
  },
  {
    "name": "FLASH",
    "depth": 2
  }]

我想用JavaScript/node.js/Angular将预览数据转换为一个分层的JSON，如下所示：

[{
    "name": "ELECTRONICS",
    "children": [
      {
        "name": "TELEVISIONS",
        "children": [
          {
            "name": "TUBE"
          },
          {
            "name": "PLASMA"
          }]
     }, 
     {
        "name": "GAME CONSOLES"
     }, 
     {
        "name": "MP3 PLAYERS",
        "children": [
          {
            "name": "FLASH"
         }]
    }]
}]

您可以使用Array#forEach和一个数组来引用深度。

var data = [{ "name": "ELECTRONICS", "depth": 0 }, { "name": "TELEVISIONS", "depth": 1 }, { "name": "TUBE", "depth": 2 }, { "name": "PLASMA", "depth": 2 }, { "name": "GAME CONSOLES", "depth": 1 }, { "name": "MP3 PLAYERS", "depth": 1 }, { "name": "FLASH", "depth": 2 }],
    tree = [];
data.forEach(function (a, i, aa) {
    var lastDepth = (aa[i - 1] || {}).depth, o;
    if (a.depth !== 0 && a.depth > lastDepth) {
        o = this[lastDepth][this[lastDepth].length - 1]
        o.children = o.children || [];
        this[a.depth] = o.children;
    }
    this[a.depth].push({ name: a.name });
}, [tree]);
console.log(tree);

这可能有助于

// Code goes here
angular.module("app",[])
.controller("ctrl", function($scope, $log){
   
   $scope.src = [
  {
    "name": "ELECTRONICS",
    "depth": 0
  },
  {
    "name": "TELEVISIONS",
    "depth": 1
  },
  {
    "name": "TUBE",
    "depth": 2
  },
  {
    "name": "PLASMA",
    "depth": 2
  },
  {
    "name": "GAME CONSOLES",
    "depth": 1
  },
  {
    "name": "MP3 PLAYERS",
    "depth": 1
  },
  {
    "name": "FLASH",
    "depth": 2
  }];
  
  $scope.tree  = _.findWhere($scope.src, {"depth":0});
    
function makeTree(parentNode){
    var d = parentNode.depth  +1;    
    var children = _.where($scope.src, {"depth" : parentNode.depth+1});
    if(children!=null){
      parentNode.children = children;
      parentNode.children.forEach(function(c){
        makeTree(c);
      });
    }
  }
  makeTree($scope.tree);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script data-require="underscore.js@1.5.2" data-semver="1.5.2" src="//cdn.jsdelivr.net/underscorejs/1.5.2/underscore-min.js"></script>
    
<body ng-app="app">
    
    <div ng-controller="ctrl">
        First Node : {{firstNode|json}}
              <h1>tree</h1>
      <pre>{{tree|json}}</pre>
    </div>
  </body>

这是神奇的

var json = [
  {
    "name": "ELECTRONICS",
    "depth": 0
  },
  {
    "name": "TELEVISIONS",
    "depth": 1
  },
  {
    "name": "TUBE",
    "depth": 2
  },
  {
    "name": "PLASMA",
    "depth": 2
  },
  {
    "name": "GAME CONSOLES",
    "depth": 1
  },
  {
    "name": "MP3 PLAYERS",
    "depth": 1
  },
  {
    "name": "FLASH",
    "depth": 2
  }];
var newJSON = [];
function createTree(parentID, i, node, depth)
{
  node.children = [];
  delete node.depth;
  while (i < json.length && json[i].depth > parentID)
  {
    if (depth === json[i].depth)
    {
        node.children.push(json[i]);
    }
    else
    {
      createTree(json[i-1].depth, i, json[i-1], depth + 1);
    }
    i++;
  }
  if (node.children.length === 0)
  {
    delete node.children;
  }
  return node;
}
var parent = {};
parent = createTree(-1, 0, parent, 0);
console.log(parent.children);
JSON.stringify(parent.children);

我假设，如果下一个数组元素的深度相等，那么它是一个同级元素，如果它是次要的，那么它就是一个子元素，并且如果它更大，那么我们不必向这个分支添加更多的元素。所以，我创建一个分支，如果深度相同，我会将其添加到我们的父级，如果深度较小，我会创建一个新分支，如果它较大，我会停止创建分支并将子级添加到"我的"父级。

编辑

我会选择Nina Scholz的解决方案，因为它更容易理解

相关文章：