javascript - 如何遍历 JavaScript 对象以找到父对象

标签 javascript angularjs

有谁知道迭代复杂 javascript 对象以定位父节点的有效方法?我有一个对象被返回,我绑定(bind)到 ivhTreeview .我可以获得要绑定(bind)的对象,但是当我单击子项时,我需要派生父节点和祖父节点:

root Item/grandparent (Incident)
   - parent (IncidentStartDate)
       -child (2008)
       -child (2009)
       - and so on

我正在使用的对象示例如下所示

[
    {
        "label": "Document Type",
        "value": "_oCommon.DocumentType",
        "children": [
            {
                "label": "Incident(4891)",
                "value": "Incident",
                "$$hashKey": "object:84",
                "__ivhTreeviewExpanded": true,
                "selected": true,
                "__ivhTreeviewIndeterminate": false,
                "children": [
                    {
                        "label": "Incident Date",
                        "value": "DateIncidentStart",
                        "children": [
                            {
                                "$$hashKey": "object:364",
                                "label": "2008(810)",
                                "value": "01/01/2008"
                            },
                            {
                                "$$hashKey": "object:365",
                                "label": "2009(810)",
                                "value": "01/01/2009"
                            },
                            {
                                "$$hashKey": "object:366",
                                "label": "2010(864)",
                                "value": "01/01/2010"
                            },
                            {
                                "$$hashKey": "object:367",
                                "label": "2011(780)",
                                "value": "01/01/2011"
                            },
                            {
                                "$$hashKey": "object:368",
                                "label": "2012(826)",
                                "value": "01/01/2012"
                            },
                            {
                                "$$hashKey": "object:369",
                                "label": "2013(801)",
                                "value": "01/01/2013"
                            }
                        ]
                    }
                ]
            }
        ],
        "$$hashKey": "object:70",
        "__ivhTreeviewExpanded": true,
        "selected": true,
        "__ivhTreeviewIndeterminate": false
    }
]

我在这里试图完成的是递归爬行树,这样如果我单击 2008,我可以看到父元素是 DateIncidentStart,它是 DocumentType: Incident< 的子元素

我采用的方法是两个 for 循环,第一个循环在我的 Angular Controller 中迭代最外层的集合(是的,这应该进一步回到服务中,但我现在只是想立即完成这项工作)

function getAggregateId(selectedNode, parentTree) {
                vm.lastSelectedNode = selectedNode.value;
                vm.lastSelectedNodeId = selectedNode.objectId;
                vm.selectedNodeParent = parentTree;
                //itterate the tree
                for (var p = 0, tree = parentTree.length; p < tree; p++) {
                    //search each child object for the matching key
                    searchTheChildNode(p, parentTree, selectedNode);
                }
            }

对于参数,ivhTreeview 将返回所选节点和从中选择该节点的树,因此在下面的示例中我同时拥有这两个

节点:

{
"$$hashKey": "object:364",
"label": "2008(810)",
"value": "01/01/2008"
}

和带有子对象的树:

[{
   "label": "Incident Date",
    "value": "DateIncidentStart",
    [0] Object
    [1] Object
    [2] Object
    [3] Object
    [4] Object
    [5] Object
    [6] Object
...}]

函数 searchTheChildNode 执行嵌套循环

function searchTheChildNode(index, parent, node) {
    for (var c = 0, child = parent[index].children.length; c < child; c++) {
       for (var nc = 0, items = parent[index].children[c]; nc < items; nc++) {
           if (parent[index].children[c].$$hashKey == node.$$hashKey) {
               console.log('found the parent ' + parent[index].children[c].value);
       }
        }
    }

};

我被卡住的地方是我可以看到循环正在运行,但是当 $$hasKey 的条件设置为 true 时,日志甚至从未发生它只是滚动。我觉得语法上有问题,但我可以看到。

在搜索这样的集合时,有没有人有任何建议或有更好的方法来定位父项和祖父项?

谢谢你的建议

最佳答案

只需从树的开头开始迭代并遍历所有子节点。返回的数组包含元素的索引和给定键的值。

function findPath(p, o) {
    function f(o, a) {
        if (Array.isArray(o)) {
            return o.some(function (b, i) {
                if (b[p.key] === p.value) {
                    array = a.concat([i, b[p.key]]);
                    return true;
                }
                return f(b.children, a.concat([i, b[p.key]]));
            });
        }
    }
    var array;
    f(o, []);
    return array;
}

var obj = [{ "label": "Document Type", "value": "_oCommon.DocumentType", "children": [{ "label": "Incident(4891)", "value": "Incident", "$$hashKey": "object:84", "__ivhTreeviewExpanded": true, "selected": true, "__ivhTreeviewIndeterminate": false, "children": [{ "label": "Incident Date", "value": "DateIncidentStart", "children": [{ "$$hashKey": "object:364", "label": "2008(810)", "value": "01/01/2008" }, { "$$hashKey": "object:365", "label": "2009(810)", "value": "01/01/2009" }, { "$$hashKey": "object:366", "label": "2010(864)", "value": "01/01/2010" }, { "$$hashKey": "object:367", "label": "2011(780)", "value": "01/01/2011" }, { "$$hashKey": "object:368", "label": "2012(826)", "value": "01/01/2012" }, { "$$hashKey": "object:369", "label": "2013(801)", "value": "01/01/2013" }] }] }], "$$hashKey": "object:70", "__ivhTreeviewExpanded": true, "selected": true, "__ivhTreeviewIndeterminate": false }];

document.write('<pre>' + JSON.stringify(findPath({ key: 'label', value: '2008(810)' }, obj), 0, 4) + '</pre>');        
document.write('<pre>' + JSON.stringify(findPath({ key: '$$hashKey', value: 'object:368' }, obj), 0, 4) + '</pre>');

关于javascript - 如何遍历 JavaScript 对象以找到父对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34277046/

相关文章:

javascript - 如何附加包含 md-checkbox 和 md-icon 的 html 标签?

javascript - 通过 http 请求加载的元素的 Angular 单击事件不起作用

javascript - 使用 OPTIONS 方法代替 POST

javascript - AngularJS 与 Angular-Google-maps : Add Marker through fomr and Find me

javascript - 所有以前缀开头的元素的 CSS 选择器

javascript - typescript 找不到名称 'IterableIterator'

javascript - 从 VBA 调用 JavaScript 文件

angularjs - Angular Material 输入验证错误消息

javascript - Sinon stub 是如何工作的?

javascript - 从日期字符串中获取时间