Sorting Javascript not working with Internet Explorer

Question

I need help with my JavaScript code, it dont seem to work properly with internet explorer 8, giving me a bundle of errors, while i start debugging it. First it says that object.keys and object.getOwnPropertyByNames not supported by Internet Explorer 8, secondly ClassList is also no supported. My code works fine with Google Chrome and Firefox, but it crashes on Internet Explorer.Need help.

Live Fiddle

var dataSource = ({
    "Pen": ({
        "Parker": ({
                "P1": ({}),
                "P2": ({})
        }),
            "Cello": ({
                "C2": ({}),
                "C1": ({})
        })
    })
}),
    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) {
                e.currentTarget.classList.toggle("hidden");
                e.stopPropagation();
            }
            if (typeof obj[prop] == "object" && Object.keys(obj[prop]).length) {
                li.appendChild(traverseObject(obj[prop]));
            } else {
                li.classList.add("leaf");
            }
            ul.appendChild(li);
            console.log(ul);
        }
        return ul;
    },
    sortedObject = function (obj) {
        document.getElementById("dvList2").innerHTML = "";
        var ul = document.createElement("ul"),
            li;
        var keys = Object.keys(obj).sort();
        for (prop in keys) {
            li = document.createElement("li");
            li.appendChild(document.createTextNode(keys[prop]));
            li.onclick = function(e) {
                e.currentTarget.classList.toggle("hidden");
                e.stopPropagation();
            }

            if (typeof obj[keys[prop]] == "object" && Object.keys(obj[keys[prop]]).length) {
                li.appendChild(sortedObject(obj[keys[prop]]));
            } else {
                li.className += "leaf";
            }
            ul.appendChild(li);
            console.log(ul);
        }
        return ul;
    };
window.onload = function () {
    document.getElementById("dvList1").appendChild(traverseObject(dataSource));
    document.getElementById("hlGSL").onclick = function(){document.getElementById("dvList2").appendChild(sortedObject(dataSource));}


}

Thank you

If it says that stuff isn't supported, it probably isn't supported, and you have to search for each one of those things that aren't supported and find workarounds for IE8. These are all common issues, and it shouldn't be very hard to polyfill. — adeneo, Feb 06 '14 at 14:20
well, you already figured out the problems. If those methods are not supported, you either need a shim/polyfill or need to rewrite your code. (e.g. https://developer.mozilla.org/en-US/docs/Web/API/Element.classList#wrapper ) — Christoph, Feb 06 '14 at 14:20

score 0 · Answer 1 · edited May 23 '17 at 11:56

Add a polyfill to your page, e.g. aight:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <!--[if lt IE 9]>
    <script type="text/javascript" src="aight.min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="YOUR OTHER SCRIPTS HERE"></script>
  </head>
  <body>
  ...
  <script type="text/javascript" src="MAYBE OTHER SCRIPTS HERE"></script>
  </body>
</html>

Another issue is that you use console.log a couple times, which isn't defined in IE8 unless you have the DevTools open. You might want to remove those lines or add a line to the top of your JS along the lines of this:

if (!'console' in window) { console = { log: function(){} }; }

See also: 'console' is undefined error for Internet Explorer .

Sorting Javascript not working with Internet Explorer

1 Answers1