0

I need help for writing cross Browser for writing code for my JavaScript code. While Executing my JavaScript on Internet explorer 8 i get error for object.key. So i need some help to fix my code so that i can run on Internet explorer 8 properly.And secondly expandable and collapsable is not working on sortObject function. Please update my fiddle and provide me a link. Following is the live fiddle link:

Fiddle 

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));
}

Thank you

user3237973
  • 69
  • 7
  • 1
    just drop in a polyfill for Object.keys... – dandavis Feb 06 '14 at 21:59
  • What's the specific error you're getting, and what line is the error on? – Barmar Feb 06 '14 at 22:01
  • Note that the [`Object.keys`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys) polyfil does not address browser bugs and at times you will get results that you do not expect, especially on IE<9 – Xotic750 Feb 06 '14 at 22:01
  • I tried to use poly but couldn't figure it out how to use polyfill for object Keys, please need some help – user3237973 Feb 06 '14 at 22:06
  • possible duplicate of [IE issue - Object.keys(value).length not supported](http://stackoverflow.com/questions/13723805/ie-issue-object-keysvalue-length-not-supported) – Paul S. Feb 06 '14 at 22:06
  • Mr dandavis, i tried but failed, and i am stuck on this postion, please check the live fiddle above – user3237973 Feb 06 '14 at 22:11
  • @Xotic750: what browser bugs are you referring to? object iteration is pretty straight-forward... – dandavis Feb 06 '14 at 22:49
  • There are the dontEnum, array holes and explicit numerabilty; these are IE<9 bugs. There are others like Error object 'message' and 'name', the functionPrototype enumerability and then there are differences between browsers and their native objects. Basically there is a whole basket full of issues that can take you by surprise with the polyfil. Remember this is enumeration rather than iteration. But it does work nicely in very simple cases. If you are really interested you can take a look at my project https://github.com/Xotic750/util-x, es5_shim or Lo_Dash – Xotic750 Feb 06 '14 at 22:55

1 Answers1

0
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));
}
user3237973
  • 69
  • 7