跨浏览器的object.key

Question

我需要帮助编写跨浏览器来为我的JavaScript代码编写代码。 在Internet Explorer 8上执行我的JavaScript时，出现object.key错误。 所以我需要一些帮助来修复我的代码，以便我可以在Internet Explorer 8上正常运行。其次，可扩展和可折叠在sortObject函数上不起作用。 请更新我的小提琴并提供一个链接。 以下是现场小提琴链接：

---

小提琴

---

var dataSource = ({
    "Pen": ({
        "Cello": ({
            "C2": ({}),
            "C1": ({})
        }),
            "Parker": ({
            "P2": ({}),
            "P1": ({})
        })
    })
});
 var traverseObject = function (obj) {
        var ul = document.createElement("ul"),
            li;

        for (var prop in obj) {
            li = document.createElement("li");
            li.appendChild(document.createTextNode(prop));
            li.onclick = function(e) {
                var classNames = e.currentTarget.className;
                if (classNames.indexOf("hidden") == -1) {
                    e.currentTarget.className += "hidden";
                } else {
                    e.currentTarget.className = e.currentTarget.className.replace("hidden", "");
                }
                e.stopPropagation();
            }

            if (typeof obj[prop] == "object" && Object.keys(obj[prop]).length) {
                console.log(Object.keys(obj[prop]).length + "  " + Object.keys(obj[prop]));
                li.appendChild(traverseObject(obj[prop]));
            } else {
                li.className += "leaf";
            }
            ul.appendChild(li);
            console.log(ul);
        }
        return ul;
    },
    sortedObject = function (obj) {
        var ul = document.createElement("ul"),
            li,span, sorted = [],
            i = 0;

        for (var prop in obj) {
            sorted.push(prop);
        }
        sorted.sort();
        for (; i < sorted.length; i++) {
            li = document.createElement("li");
            span = document.createElement("span");
            span.innerHTML = sorted[i];

            span.onclick = function(e) {
                var classNames = e.currentTarget.className;
                if (classNames.indexOf("hidden") == -1) {
                    e.currentTarget.className += "hidden";
                } else {
                    e.currentTarget.className = e.currentTarget.className.replace("hidden", "");
                }
                e.stopPropagation();
            }
            li.appendChild(span);

            if (typeof obj[sorted[i]] == "object" && Object.keys(obj[sorted[i]]).length) {
                console.log(Object.keys(obj[sorted[i]]).length + "  " + Object.keys(obj[sorted[i]]));
                li.appendChild(sortedObject(obj[sorted[i]]));
            } else {
                li.className += "leaf";
            }
            ul.appendChild(li);
            console.log(ul);
        }
        return ul;
    };


window.onload = function () {
    document.getElementById("dvList1").appendChild(traverseObject(dataSource));
    document.getElementById("dvList2").appendChild(sortedObject(dataSource));
}

---

谢谢

Answer 1

var objectKeys = function(){
    var length = 0;
    for(var prop in obj){
    if(data.hasOwnProperty(prop))
        length++;
    }
    return length;
},  
    traverseObject = function (obj) {
        var ul = document.createElement("ul"),
            li;

        for (var prop in obj) {
            li = document.createElement("li");
            li.appendChild(document.createTextNode(prop));
            li.onclick = function(e) {
                var classNames = e.currentTarget.className;
                if (classNames.indexOf("hidden") == -1) {
                    e.currentTarget.className += "hidden";
                } else {
                    e.currentTarget.className = e.currentTarget.className.replace("hidden", "");
                }
                e.stopPropagation();
            }

            if (typeof obj[prop] == "object" && objectKeys) {
        //      console.log(Object.keys(obj[prop]).length + "  " + Object.keys(obj[prop]));
                li.appendChild(traverseObject(obj[prop]));
            } else {
                li.className += "leaf";
            }
            ul.appendChild(li);
            console.log(ul);
        }
        return ul;
    },
    sortedObject = function (obj) {
        var ul = document.createElement("ul"),
            li,span, sorted = [],
            i = 0;

        for (var prop in obj) {
            sorted.push(prop);
        }
        sorted.sort();
        for (; i < sorted.length; i++) {
            li = document.createElement("li");
            span = document.createElement("span");
            span.innerHTML = sorted[i];

            span.onclick = function(e) {
                var classNames = e.currentTarget.className;
                if (classNames.indexOf("hidden") == -1) {
                    e.currentTarget.className += "hidden";
                } else {
                    e.currentTarget.className = e.currentTarget.className.replace("hidden", "");
                }
                e.stopPropagation();
            }
            li.appendChild(span);

            if (typeof obj[sorted[i]] == "object" && objectKeys) {
        //      console.log(Object.keys(obj[sorted[i]]).length + "  " + Object.keys(obj[sorted[i]]));
                li.appendChild(sortedObject(obj[sorted[i]]));
            } else {
                li.className += "leaf";
            }
            ul.appendChild(li);
            console.log(ul);
        }
        return ul;
    };


window.onload = function () {
    document.getElementById("dvList1").appendChild(traverseObject(dataSource));
    document.getElementById("dvList2").appendChild(sortedObject(dataSource));
}