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 most efficient way to add an attribute in jQuery - using the attr() method, passing attributes as a key-value object, or directly?

Tips for resolving the "trim" of undefined property error in Node.js

I am currently studying JavaScript. The syntax of my if statement with && appears to be accurate, however

Exploring location-based services using React-Redux

Executing a JavaScript function when a selection is made from a dropdown menu

What is the process for retrieving an object from a node.js server using JSON.stringify() in a JavaScript file?

Is there a specific measurement or scale for the dragging feature in jQuery UI draggables?

What is the best way to set a value for a variable within a UI component in React?

Running yarn build in react results in CSS modifications

When placed within a setInterval loop, the event.clientY variable becomes inaccessible

Stop the Bootstrap row from automatically adjusting to the height of the tallest child column element, and instead utilize the extra space below the smaller element

Placing the error message for validation in its appropriate position

No response headers retrieved from WebAPI

tips for converting objects into arrays with JavaScript

How can I make my Grid items in React and Material-UI occupy the entire horizontal space without wrapping to the next row?

Using DIV to "enclose" all the elements inside

Create a Rest API and implement server-side rendering concurrently using SailsJs

Ways to display content exclusively to logged-in users

What are the steps to set a 404 status code in next.js when utilizing ISR with a fallback of "blocking"?

Backend JS error found in Joomla 3.0 Component