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.

Answer 1

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.