Question

我试图遍历一个可以有多个级别数组的对象。

例如

我从：

开始

var htmlString = {
    "div": [{
        "attributes": {
            "class": "myDivClass"
        },
        "p": [{
            "attributes": {
                "class": "myPClass"
            }
        }]
    }]
};

现在让我们添加其他内容：

var htmlString = {
    "div": [{
        "attributes": {
            "class": "myDivClass"
        },
        "p": [{
            "attributes": {
                "class": "myPClass"
            },
            "span": [{
                "attributes": {
                    "class": "mySpanClass"
                }
            }]
        }]
    }]
};

我正在处理的代码形状与：

相同

var childNode = document.createElement("myChildElement");
for (key in value) {
    if (value.hasOwnProperty(key)) {
        if (key == "attributes") {
            childNode.setAttributes(myAttributes); // loop through attributes on the element
        }
        else {
            //the same code ad infinitum
            var childChildNode = document.createElement("myChildChildElement");
            // etc etc....
        }
    }
}
parentNode.appendChild(childNode);

每个额外元素的规则是相同的，所以我应该能够以相同的方式为这两段代码循环这个数据结构，我只是不确定如何，尽管我会这样做打赌那里有一个while（）循环。有谁能告诉我？

P.S。请原生javascript，没有jQuery！（虽然，如果你有YUI3答案，我会非常感兴趣）。

Answer 1

var createTree = function (node, data) {
    for (var key in data) {
        if (data.hasOwnProperty(key)) {
            if (key == "attributes") {
                node.setAttributes(myAttributes); // loop through attributes on the element
            }
            else {
                for (var i = 0; i < data[key].length; ++i) {
                    var childNode = document.createElement(key);
                    createTree(childNode, data[key][i]);
                    node.appendChild(childNode);
                }
            }
        }
    }
}

createTree(parentNode, htmlString);

Answer 2

好的，Qnan的代码需要一些调整，因为它没有处理正确结束分支的结束。一旦它结束，没有什么可以检查，并且没有任何空值长度导致错误。

我知道这是不好的做法，但现在已经很晚了，我需要修复它，所以这是我的调整。

var createTree = function (node, data) {
    for (key in data) {
        if (data.hasOwnProperty(key)) {
            if (key == "attributes") {
                node.setAttributes(myAttributes); // loop through attributes on the element
            }
            else {
                try {
                    for (var i = 0; i < data[key].length; ++i) {
                        var childNode = document.createElement(key);
                        createTree(childNode, data[key][i]);
                        node.appendChild(childNode);
                    }
                }
                catch(error) {
                    console.log("there was an error");
                }
            }
        }
    }
}

createTree(parentNode, htmlString);

是的，没错，我通过尝试/抓住它来埋葬错误......然后什么都不做。不要在家里尝试这个孩子！

Qnan，再次感谢。

迭代嵌套对象/数组

2 个答案: