Recursion with DOM in JavaScript

Question

I am learning JavaScript and I was trying to solve a question given at https://javascript.info/modifying-document#create-a-tree-from-the-object.

The question was to create a nested ul/li from the nested object given.

The following is my code:

let data = 
  {
      "Fish": {
    "trout": {},
    "salmon": {}
  },

"Tree": {
    "Huge": {
      "sequoia": {},
      "oak": {}
    },
    "Flowering": {
      "redbud": {},
      "magnolia": {}
    }
  }
};


function createTree(data,key=null,parent_element=document.body){

  if(Object.keys(data).length){



    if(key){

    li = document.createElement('li');
    li.textContent = key;
    li = parent_element.append(li);

    }

    ul = document.createElement('ul');


    parent_element.append(ul);



    for(let key in data){

    createTree(data[key],key,ul);

    }

    return

  }


    li = document.createElement('li');
    li.textContent = key;
    parent_element.append(li);
    return;
}

createTree(data);

This produces the following output

while the expected output is the following

What is wrong with my code? I can't find anything wrong with my logic.

Jake Miller · Accepted Answer · 2018-06-23 06:01:09Z

2

There is nothing wrong with your logic. The problem is, you forgot to put a var declaration before your ul variable in your createTree function. Add var before it and your code works. (You should ALWAYS declare variables with var, let, or const or things can get weird.)

let data = {
  "Fish": {
    "trout": {},
    "salmon": {}
  },
  "Tree": {
    "Huge": {
      "sequoia": {},
      "oak": {}
    },
    "Flowering": {
      "redbud": {},
      "magnolia": {}
    }
  }
};


function createTree(data, key = null, parent_element = document.body) {
  var li;
  if (Object.keys(data).length) {
    if (key) {
      li = document.createElement('li');
      li.textContent = key;
      li = parent_element.append(li);
    }

    var ul = document.createElement('ul');
    parent_element.append(ul);

    for(let key in data){
      createTree(data[key], key, ul);
    }
    
    return;
  }

  li = document.createElement('li');
  li.textContent = key;
  parent_element.append(li);
  return;
}

createTree(data);

Here's a quick breakdown of the different ways to declare variables in javascript and what each one means:

// Creates a global variable.
myVar1 = 1;

// Creates a variable within the scope you're currently in. It's "hoisted"
// to the top of the scope you're currently in, so if you declare a var in 
// the middle of a function, it gets pulled to the very top when your code
// is executed.
var myVar2 = 2;

// Declares a variable that is not hoisted.
let myVar3 = 3;

// Declares a constant that cannot be reassigned.
const myVar4 = 4;

The reason your implementation failed is because ul became a global variable which caused your function to not return a desirable result.

edited Jun 23, 2018 at 6:01

answered Jun 23, 2018 at 5:38

Jake Miller

2,6622 gold badges27 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jibin mathew Over a year ago

I just spend last 7 hours trying to figure out what went wrong. Thank you so much. Do you know what happened when variables were not declared with let.

Jake Miller Over a year ago

@jibinmathew Added an explanation to my answer. See my edit.

Paaarth · Accepted Answer · 2018-06-23 05:43:51Z

0

let data = {
    "Fish": {
        "trout": {},
        "salmon": {}
    },

    "Tree": {
        "Huge": {
            "sequoia": {},
            "oak": {}
        },
        "Flowering": {
            "redbud": {},
            "magnolia": {}
        }
    }
};


function createTree(data, key = null, parent_element = document.body) {
    if (Object.keys(data).length) {
        let ul = document.createElement('ul');
        if (key) {
            li = document.createElement('li');
            li.textContent = key;
            li = parent_element.append(li);
        }
        ul = document.createElement('ul');
        parent_element.append(ul);
        for (let key in data) {
            createTree(data[key], key, ul);
        }
        return
    }
    li = document.createElement('li');
    li.textContent = key;
    parent_element.append(li);
    return;
}

createTree(data);

You need to create let ul = document.createElement('ul'); then need to append <li> was creating issue...

answered Jun 23, 2018 at 5:43

Paaarth

4,4693 gold badges26 silver badges39 bronze badges

2 Comments

jibin mathew Over a year ago

Your answer is correct, I didn't down vote your answer. I have upvoted your answer. Thank you for your time.

Paaarth Over a year ago

@jibinmathew I have given solution faster & with quality than Jake miller so you need to give me upvote.. right????

Collectives™ on Stack Overflow

Recursion with DOM in JavaScript

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related