Javascript 获取层次结构的级别_Javascript_Algorithm_Sorting_Hierarchy_Dataflow

Javascript 获取层次结构的级别

javascript algorithm sorting

Javascript 获取层次结构的级别,javascript,algorithm,sorting,hierarchy,dataflow,Javascript,Algorithm,Sorting,Hierarchy,Dataflow,我有一个对象数组，其中每个对象都有一个id和一个ParentId属性（因此它们可以排列在树中）。它们没有特定的顺序请注意，id和parentId将不是整数，而是字符串（只是希望示例代码更干净..）只有一个根：假设它的id：1 数据如下所示： data = [ { id:"id-2", parentId:"id-3" }, { id:"id-4", parentId:"2" }, {

我有一个对象数组，其中每个对象都有一个

id

和一个

ParentId

属性（因此它们可以排列在树中）。它们没有特定的顺序

请注意，

id

和

parentId

将不是整数，而是字符串（只是希望示例代码更干净..）

只有一个根：假设它的

id

：1 数据如下所示：

 data = [
   {
        id:"id-2",
        parentId:"id-3"
    },
    {
        id:"id-4",
        parentId:"2"
    },
    {
        id:"id-3",
        parentId:"id-4"
    },
    {
        id:"id-5",
        parentId:"id-4"
    },
    {
        id:"id-6",
        parentId:"id-1"
    },
    {
        id:"id-7",
        parentId:"id-1"
    }
    // and so on...
]

我正在寻找一种有效的方法，为每个对象指定一个

level

属性，该属性应指定其嵌套的级别

它们应该是这样的：

data = [
    {
        id:"id-2",
        parentId:"id-1",
        level:2
    },
    {
        id:"id-3",
        parentId:"id-4",
        level:5

    },
    {
        id:"id-4",
        parentId:"id-2",
        level:3

    },
    {
        id:"id-5",
        parentId:"id-4",
        level:5
    },
    {
        id:"id-6",
        parentId:"id-1",
        level:2

    },
    {
        id:"id-7",
        parentId:"id-3",
        level:4
    }
    // and so on...
]

简言之：我希望通过在数组中循环并计算出层次结构，动态添加

level

此外，（如果可能的话）它们应该按照顺序进行排序，例如，来自同一父对象的所有对象

level:3

应该彼此相邻，并不是说应该有同一个父母的兄弟姐妹彼此相邻，而不是有两个3级的堂兄弟姐妹彼此相邻。

我不确定从哪里获得

级别的值，所以我假设它只是一个整数。顺便说一句，您可以通过循环将level属性添加到数组的每个项中
for (var i = 0, l = data.length; i < l; i++) { 
    data[i].level = i
}

这是你的工作代码。级别从2开始
警告：如果无法计算级别，应用程序可能会进入无限循环。因此，请确保parentId
对所有对象都有效，并且其中至少有一个对象具有parentId=“id-1”


数据=[
{
id:“id-2”，
父id:“id-3”
},
{
id:“id-4”，
父id:“id-2”
},
{
id:“id-3”，
父id:“id-5”
},
{
id:“id-5”，
parentId:“id-1”
}
];
函数processData（）{
flag=true；
while（旗帜）{
flag=false；
对于（变量i=0；i0）{
数据[i]。级别=l+1；
}否则{
flag=true；
}
}
}
}
}
函数getLevel（id）{
对于（变量i=0；i
以下代码的工作示例已打开
按id为树编制索引，并从每个节点向上遍历，然后计数，直到找到根为止。首先通过索引，我们接近O（n）时间复杂度（取决于树密度）****已更新以满足排序要求，并允许排除根节点***：
function levelAndSort(data, startingLevel) {
    // indexes
    var indexed = {};        // the original values
    var nodeIndex = {};      // tree nodes
    var i;
    for (i = 0; i < data.length; i++) {
        var id = data[i].id;
        var node = {
            id: id,
            level: startingLevel,
            children: [],
            sorted: false
        };
        indexed[id] = data[i];
        nodeIndex[id] = node;
    }

    // populate tree
    for (i = 0; i < data.length; i++) {
        var node = nodeIndex[data[i].id];
        var pNode = node;
        var j;
        var nextId = indexed[pNode.id].parentId;
        for (j = 0; nextId in nodeIndex; j++) {
            pNode = nodeIndex[nextId];
            if (j == 0) {
                pNode.children.push(node.id);
            }
            node.level++;
            nextId = indexed[pNode.id].parentId;
        }
    }

    // extract nodes and sort-by-level
    var nodes = [];
    for (var key in nodeIndex) {
        nodes.push(nodeIndex[key]);
    }
    nodes.sort(function(a, b) {
        return a.level - b.level;
    });

    // refine the sort: group-by-siblings
    var retval = [];
    for (i = 0; i < nodes.length; i++) {
        var node = nodes[i];
        var parentId = indexed[node.id].parentId;
        if (parentId in indexed) {
            var pNode = nodeIndex[parentId];
            var j;
            for (j = 0; j < pNode.children.length; j++) {
                var child = nodeIndex[pNode.children[j]];
                if (!child.sorted) {
                    indexed[child.id].level = child.level;
                    retval.push(indexed[child.id]);
                    child.sorted = true;
                }
            }
        }
        else if (!node.sorted) {
            indexed[node.id].level = node.level;
            retval.push(indexed[node.id]);
            node.sorted = true;
        }
    }
    return retval;
}

输出：

注
如果更改输入顺序，排序结果会略有不同，但仍然是正确的（即，按级别顺序，按同级分组）。
解决此问题而不需要递归的一种方法是创建DOM层次结构。对于数组中的每个项，创建一个div并将其附加到其父项。然后遍历DOM并指定级别（顶部为级别1，然后为每个子级添加1）
我在这里设置了一个粗略的演示：

代码摘录：
top.dataset.level="1";
var topChildren=top.getElementsByTagName("div");
for (var i=0;i<topChildren.length;i++) {
topChildren[i].dataset.level=parseInt(topChildren[i].parentNode.dataset.level)+1;
}

top.dataset.level=“1”；
var topChildren=top.getElementsByTagName（“div”）；
对于（var i=0；iI希望通过循环数组和计算层次结构来动态添加级别，也因为我指定id
不是整数，它们将是字符串，所以您的意思是计算此id在父级中的元素有多深？并将其分配给level属性？在t上使用jQuery对于上面的循环，data[i].level=$（data[i].id）.parentsUntil（$（data[i].parentId））.length+1；
@Mark Dee谢谢，但是id
和parentId
不是整数，它们将是字符串。您的根元素是什么样子的？有一个根，假设它的parentId
:1（将是字符串）数据是否已按id
排序？@JoeCoder，不，它将是随机顺序。根元素的d id和parentId是什么？该元素的级别应该是什么？@adardesign抱歉，我不确定是否理解。div只是一个中间步骤，并不意味着要保留。你的问题并不是说你想要任何（嵌套或非嵌套）。使用DOM作为数据结构的聪明方法，但冗余，因为树已经作为一系列parentId引用存在。@JoeCoder同意冗余。如果级别的用途（问题中未解释）正确，我的方法将很有趣是为了构建一个DOM树。@Christophe，没错，目的是最终构建一个DOM，但不是嵌套的，我将在子对象旁边生成一个平面DOM父对象…@adardesign我明白了。我稍微修改了我的演示，以在最后取消嵌套div，希望这有帮助：。同样，这是一个粗糙的代码，有优化空间…看起来很棒！是吗是否有一个选项可以省略实际根？（在您的数据中，它是第一个…）
function levelAndSort(data, startingLevel) {
    // indexes
    var indexed = {};        // the original values
    var nodeIndex = {};      // tree nodes
    var i;
    for (i = 0; i < data.length; i++) {
        var id = data[i].id;
        var node = {
            id: id,
            level: startingLevel,
            children: [],
            sorted: false
        };
        indexed[id] = data[i];
        nodeIndex[id] = node;
    }

    // populate tree
    for (i = 0; i < data.length; i++) {
        var node = nodeIndex[data[i].id];
        var pNode = node;
        var j;
        var nextId = indexed[pNode.id].parentId;
        for (j = 0; nextId in nodeIndex; j++) {
            pNode = nodeIndex[nextId];
            if (j == 0) {
                pNode.children.push(node.id);
            }
            node.level++;
            nextId = indexed[pNode.id].parentId;
        }
    }

    // extract nodes and sort-by-level
    var nodes = [];
    for (var key in nodeIndex) {
        nodes.push(nodeIndex[key]);
    }
    nodes.sort(function(a, b) {
        return a.level - b.level;
    });

    // refine the sort: group-by-siblings
    var retval = [];
    for (i = 0; i < nodes.length; i++) {
        var node = nodes[i];
        var parentId = indexed[node.id].parentId;
        if (parentId in indexed) {
            var pNode = nodeIndex[parentId];
            var j;
            for (j = 0; j < pNode.children.length; j++) {
                var child = nodeIndex[pNode.children[j]];
                if (!child.sorted) {
                    indexed[child.id].level = child.level;
                    retval.push(indexed[child.id]);
                    child.sorted = true;
                }
            }
        }
        else if (!node.sorted) {
            indexed[node.id].level = node.level;
            retval.push(indexed[node.id]);
            node.sorted = true;
        }
    }
    return retval;
}

// level 0 (root) excluded
var startingLevel = 1;
var someData = [
    {id : "id-1", parentId : "id-0"},
    {id : "id-2", parentId : "id-0"},
    {id : "id-3", parentId : "id-2"},
    {id : "id-4", parentId : "id-3"},
    {id : "id-5", parentId : "id-4"},
    {id : "id-6", parentId : "id-4"},
    {id : "id-7", parentId : "id-0"},
    {id : "id-8", parentId : "id-1"},
    {id : "id-9", parentId : "id-7"},
    {id : "id-10", parentId : "id-1"},
    {id : "id-11", parentId : "id-1"},
    {id : "id-12", parentId : "id-1"}
];
var outputArray = levelAndSort(someData, startingLevel);

top.dataset.level="1";
var topChildren=top.getElementsByTagName("div");
for (var i=0;i<topChildren.length;i++) {
topChildren[i].dataset.level=parseInt(topChildren[i].parentNode.dataset.level)+1;
}