伙计们正在尝试创建一个动态菜单列表。用户可以创建的元素的深度没有限制。

我的问题

我的一组 URL 看起来像这样

var json_data = [
    {
        "title" : "Food",
        "path" : "/root",
    },
    {
        "title" : "Cloths",
        "path" : "/root",
    },
    {
        "title" : "Veg",
        "path" : "/root/Food",
    },
    {
        "title" : "Brinjal",
        "path" : "/root/Food/Veg",
    },
    {
        "title" : "T shirt",
        "path" : "/root/Cloths",
    },
    {
        "title" : "Shirt",
        "path" : "/root/Cloths",
    },
    {
        "title" : "Green brinjal",
        "path" : "/root/Food/Veg/Brinjal",
    }
];

我希望标题采用层次结构格式，我最终将以ul> li的形式呈现以在前端创建菜单。

层次结构应该是这样的:

[
  {
    "title": "Food",
    "path": "/root",
    "children": [
      {
        "title": "Veg",
        "path": "/root/Food",
        "children": [
          {
            "title": "Brinjal",
            "path": "/root/Food/Veg",
            "children": [
              {
                "title": "Green brinjal",
                "path": "/root/Food/Veg/Brinjal",
                "children": []
              }
            ]
          }
        ]
      }
    ]
  },
  {
    "title": "Cloths",
    "path": "/root",
    "children": [
      {
        "title": "T shirt",
        "path": "/root/Cloths",
        "children": []
      },
      {
        "title": "Shirt",
        "path": "/root/Cloths",
        "children": []
      }
    ]
  }
]

我尝试了什么

    // Add an item node in the tree, at the right position
    function addToTree( node, treeNodes ) {
        // Check if the item node should inserted in a subnode
        for ( var i=0; i<treeNodes.length; i++ ) {
            var treeNode = treeNodes[i];
            // "/store/travel".indexOf( '/store/' )
            if ( node.path.indexOf( treeNode.path + '/' ) == 0 ) {
                addToTree( node, treeNode.children );
                // Item node was added, we can quit
                return;
            }
        }
        // Item node was not added to a subnode, so it's a sibling of these treeNodes
        treeNodes.push({
            title: node.title,
            path: node.path,
            children: []
        });
    }
    //Create the item tree starting from menuItems
    function createTree( nodes ){
        var tree = [];

        for ( var i=0; i<nodes.length; i++ ) {
            var node = nodes[i];
            addToTree( node, tree );
        }
        return tree;
    }

// variable = "json_data" is the set of URLS
var menuItemsTree = createTree( json_data );
console.log(menuItemsTree)

它产生的结果是这样的:

[
  {
    "title": "Food",
    "path": "/root",
    "children": [
      {
        "title": "Veg",
        "path": "/root/Food",
        "children": [
          {
            "title": "Brinjal",
            "path": "/root/Food/Veg",
            "children": [
              {
                "title": "Green brinjal",
                "path": "/root/Food/Veg/Brinjal",
                "children": []
              }
            ]
          }
        ]
      },
      {
        "title": "T shirt",
        "path": "/root/Cloths",
        "children": []
      },
      {
        "title": "Shirt",
        "path": "/root/Cloths",
        "children": []
      }
    ]
  },
  {
    "title": "Cloths",
    "path": "/root",
    "children": []
  }
]

元素 "T Shirt" 和 "Shirt" 被插入 Food 的子元素:[] 中，它们应该在 中>布的 child :[]

我使用的解决方案取自Here

我试图自己推导出一个算法 - 但它还没有完全正确地点击。如果有人已经有解决方案，请提供帮助。如果我能自己得出解决方案，我会在这里分享。 上面的代码是 谢谢

最佳答案

逻辑如下。这是一个 Working Fiddle

var json_data = [{
  "title": "Food",
  "path": "/root",
}, {
  "title": "Cloths",
  "path": "/root",
}, {
  "title": "Veg",
  "path": "/root/Food",
}, {
  "title": "Brinjal",
  "path": "/root/Food/Veg",
}, {
  "title": "T shirt",
  "path": "/root/Cloths",
}, {
  "title": "Shirt",
  "path": "/root/Cloths",
}, {
  "title": "Green brinjal",
  "path": "/root/Food/Veg/Brinjal",
},{
  "title": "Test cloth",
  "path": "/root/Cloths/Shirt",
}];


// Add an item node in the tree, at the right position
function addToTree(node, treeNodes) {
  var parentNode = GetTheParentNodeChildArray(node.path, treeNodes) || treeNodes;

  parentNode.push({
    title: node.title,
    path: node.path,
    children: []
  });
}

function GetTheParentNodeChildArray(path, treeNodes) {
  for (var i = 0; i < treeNodes.length; i++) {
    var treeNode = treeNodes[i];

    if (path === (treeNode.path + '/' + treeNode.title)) {
      return treeNode.children;
    } 
    else if (treeNode.children.length > 0) {
      var possibleParent = false;

      treeNode.children.forEach(function(item) {
        if (path.indexOf(item.path + '/' + item.title) == 0) {
          possibleParent = true;
          return false;
        }
      });

      if (possibleParent) {
        return GetTheParentNodeChildArray(path, treeNode.children)
      }
    }
  }
}


//Create the item tree starting from menuItems
function createTree(nodes) {
  var tree = [];

  for (var i = 0; i < nodes.length; i++) {
    var node = nodes[i];
    addToTree(node, tree);
  }
  return tree;
}

// variable = "json_data" is the set of URLS
var menuItemsTree = createTree(json_data);
console.log(menuItemsTree);

此逻辑的局限性:如果先解析父 Node 再解析子 Node ，则此逻辑有效，因此建议对列表进行排序 URL(即 json_data[] )同样如此。这是 Sorting-before + tree-structuring-the-sorted 的片段

希望对你有帮助

关于Javascript 从一组 URL 派生树，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40945925/