创建嵌套循环以在javascript中构建菜单

Create nested loop to build menu in javascript

本文关键字：构建 菜单 javascript 嵌套循环 创建      更新时间：2023-09-26

在这里，我在创建带有泛型函数的嵌套循环时遇到了问题，并且对创建菜单有疑问。

这里的行将看起来像

id     data             parentId
1       HEADER1             0
2       HEADER2             0
3       HEADER3             0
4       HEADER4             0
5       H1SUB1              1
6       H1SUB1              1
7       H2SUB2              2
8       H2SUB2              2
9       H1SUB1sub1          5
10      H1SUB1sub1sub1      9

如何将其带到菜单 

HEADER1                     HEADER2                         HEADER3                 HEADER4
    H1SUB1                      H2SUB2
    H1SUB1                      H2SUB2
        H1SUB1sub1
            H1SUB1sub1sub1

我尝试的代码是 

var arrObj = {};
for( var i=0;i<rows.length;i++){
    var row = rows[i],
    id=row.id,
    parentId = row.parentId;
    if(arrObj[parentId]){
      arrObj[parentId].items.push(row);
    } else if(parentId===0){
      arrObj[parentId] = {items=[]};    
  }
 }

在这里，我希望父 ID 0 只是页面中的标题。

帮助我创建菜单以及我应该如何获得它。提前致谢

创建一个您可能想要的解决方案，我不确定您想要的结果是什么，所以我假设 root 的结果是一个具有名为 items 的属性的对象，它是其子项的数组。

var l = [
  {id: 1, data: 'HEADER1', parentId: 0},
  {id: 2, data: 'HEADER2', parentId: 0},
  {id: 3, data: 'HEADER3', parentId: 0},
  {id: 4, data: 'HEADER4', parentId: 0},
  {id: 5, data: 'H1SUB1', parentId: 1},
  {id: 6, data: 'H1SUB1',  parentId: 1},
  {id: 7, data: 'H2SUB2', parentId: 2},
  {id: 8, data: 'H2SUB2', parentId: 2},
  {id: 9, data: 'H1SUB1sub1', parentId: 5},
  {id: 10, data: 'H1SUB1sub1sub1', parentId: 9},
];
var getList = function(list) {

var result = {items: []},length = list.length;
   // Use object to create a hash of objects.
  var tmpStore = {}
  var i, item, id, pId;
  for (i = 0; i < length; ++i) {
    item = list[i];
    id = item.id;
    tmpStore[id] = item;
    pId = parseInt(item.parentId, 10);
    // If its pId is 0, then Added it to result's items, otherwise, find target
    // in list, and put to its item attribute(if no such attr, create it)
    if (pId === 0) {
      result.items.push(item);
    } else {
      if (typeof tmpStore[pId].items === 'undefined') {
        tmpStore[pId].items = [];
      }
      tmpStore[pId].items.push(item);
    }
  }
  return result;
};

编辑：更改为对象哈希映射。

相关文章：