JavaScript code for Tree not functioning correctly on Internet Explorer

Question

JavaScript code for Tree not functioning correctly on Internet Explorer

Seeking assistance to fix a bug in my JavaScript program. The code works perfectly on Google Chrome and Firefox, however it encounters an error in Internet Explorer 8 as indicated below. Any suggestions on how to resolve this issue would be greatly appreciated. Please find the link to the fiddle below:

Error Message:

SCRIPT438: Object doesn't support property or method 'keys'
File: treelist.js, Line: 12, Column: 13

Fiddle

var dataSource = {
            "Watch": {
                "Titan": {},
                "parent": {
                    "leaf1": {},
                    "leaf2": {}
                },
            }
        },
    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) {
                li.appendChild(traverseObject(obj[prop]));
            } else {
                li.className += "leaf";
            }
            ul.appendChild(li);
            console.log(ul);
        }
        return ul;
    };


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

Thank you

javascript jquery html css list

Answer 1

Answer №1

In IE8, the commas at the end of the members declaration are not supported.

To fix this issue, simply remove the commas like so:

 dataSource = {
        "Watch": {
            "Titan": {},
            "parent": {
                "leaf1": {},
                "leaf2": {}
            } <-- Remove this
        }

Additionally, please note that "Object.keys" is not supported in IE8:

  if (typeof obj[prop] == "object" && Object.keys(obj[prop]).length)

To address this problem, you can add the following code snippet:

if (!Object.keys) {
   Object.keys = function(obj) {
      var keys = [];

      for (var i in obj) {
         if (obj.hasOwnProperty(i)) {
            keys.push(i);
         }
      }  

      return keys;
   };
}

Answer 2

In IE8, the commas at the end of the members declaration are not supported.

To fix this issue, simply remove the commas like so:

 dataSource = {
        "Watch": {
            "Titan": {},
            "parent": {
                "leaf1": {},
                "leaf2": {}
            } <-- Remove this
        }

Additionally, please note that "Object.keys" is not supported in IE8:

  if (typeof obj[prop] == "object" && Object.keys(obj[prop]).length)

To address this problem, you can add the following code snippet:

if (!Object.keys) {
   Object.keys = function(obj) {
      var keys = [];

      for (var i in obj) {
         if (obj.hasOwnProperty(i)) {
            keys.push(i);
         }
      }  

      return keys;
   };
}

Answer 3

Answer №2

The structure of Schema can be quite complex and somewhat confusing when interpreting tree structures in JavaScript.

If you were given the opportunity to revamp it, consider creating something similar to the following:

var dataSource = {
            name : "Watch",
            nodes : [
                {
                 name : "Titan",
                 nodes: [],
                },
                {
                 name : "parent",
                 node : [
                     {
                      name : "leaf1",
                      nodes : []
                     },
                      {
                      name : "leaf2",
                      nodes : []
                      }
                 ]
                },
            ]
        };

By simplifying your code in this way, you can significantly reduce its size and eliminate any cross-browser issues without the need for workarounds.

Answer 4

The structure of Schema can be quite complex and somewhat confusing when interpreting tree structures in JavaScript.

If you were given the opportunity to revamp it, consider creating something similar to the following:

var dataSource = {
            name : "Watch",
            nodes : [
                {
                 name : "Titan",
                 nodes: [],
                },
                {
                 name : "parent",
                 node : [
                     {
                      name : "leaf1",
                      nodes : []
                     },
                      {
                      name : "leaf2",
                      nodes : []
                      }
                 ]
                },
            ]
        };

By simplifying your code in this way, you can significantly reduce its size and eliminate any cross-browser issues without the need for workarounds.

JavaScript code for Tree not functioning correctly on Internet Explorer

Answer №1

Answer №2

Similar questions

What is the best way to create a promise in a basic redux action creator?

Tips for referencing Google Maps initialization in individual files within a website application

The Material UI month picker interface is not displaying correctly

What is the best way to intelligently cache specific segments of a page in PHP?

bridging information from tables with text fields in forms

Looping through an array of objects in VueJS can become a bit tricky when dealing with objects whose properties are dynamic. How can I efficiently

How can you utilize a computed property in a Vue component to select all the text within it?

Failed to fully install all dependencies for my project with yarn install

Tips for resizing a larger image to display only a specific portion in CSS (and incorporating JS if needed)

Is it possible to refresh data efficiently using web scraping tools, similar to how it

When attempting to initiate a new session, Webdriver.io receives an HTML response from selenium

Having trouble adjusting the refresh timer based on user focus with setTimeout

Error: The function $scope.apply is invalid and cannot be executed

`Loading CSS files in Node.js with Express``

Error: The function props.addToCart is not accessible

Challenges when working with AJAX/jQuery in terms of fetching JSON data and setting dataType

How can one ensure that Discord waits for a script to complete running, and how can you prevent Discord from responding until all necessary data has been obtained?

Is there a way to exit from await Promise.all once any promise has been fulfilled in Chrome version 80?

Avoiding overlapping in setTimeOut when using jQuery.hover()

Incorrect format for a date in AngularJS