Nested List from Javascript

Question

I am trying to turn the json data that is in the db variable into a nested list on the html page. Instead it is giving me a sort of ladder of each child node inserted into the child node before it. I can not figure out why it is not nesting correctly. What am i missing?

db = JSON.parse(`
                {
                    "title": "Root", 
                    "children": [
                        {
                            "title": "Child1",
                            "children": [
                                {"title": "Child1a"},
                                {"title": "Child1b"},
                                {"title": "Child1c"}
                            ]
                        },
                        {
                            "title": "Child2",
                            "children": [
                                {"title": "Child2a"},
                                {"title": "Child2b"},
                                {"title": "Child2c"}
                            ]
                        }
                    ]
                }
            `);

function recurse(u, j) {

  li = document.createElement('li');
  ul = document.createElement('ul');

  li.setAttribute('title', j.title);

  li.appendChild(ul);
  u.appendChild(li);

  (j.children || []).forEach(c => {
    recurse(ul, c);
  });

}

recurse(document.getElementById('tree'), db);

* {
  margin: 0;
}

li::before {
  content: attr(title);
}

li:hover {
  cursor: grab;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Scratch</title>
</head>

<body>
  <ul id='tree'></ul>
</body>

</html>

Otherwise they're global variables, and when you recurse you overwrite the variables used in the caller. — Barmar, Nov 23 '21 at 20:06
@pilchard It's not a typo. But reproducible and exemplary :) — Gleb Kemarsky, Nov 23 '21 at 20:15
@GlebKemarsky That's fair, but then should be closed as duplicate for any of the myriad `scope` questions including [What is the purpose of the var keyword and when should I use it (or omit it)?](https://stackoverflow.com/questions/1470488/what-is-the-purpose-of-the-var-keyword-and-when-should-i-use-it-or-omit-it) — pilchard, Nov 23 '21 at 21:11
@pilchard The same fix can solve many problems. And many problems can be based on a common mistake. But the "duplicated question", in my opinion, is more related to describing the problematic behavior when working on a specific task. You can clarify this point by asking a question on https://meta.stackoverflow.com/ — Gleb Kemarsky, Nov 24 '21 at 07:14

score 2 · Accepted Answer · answered Nov 23 '21 at 20:09

You're referring to the same variables over and over because you're not re-declaring them in the function scope.

db = JSON.parse(`
                {
                    "title": "Root", 
                    "children": [
                        {
                            "title": "Child1",
                            "children": [
                                {"title": "Child1a"},
                                {"title": "Child1b"},
                                {"title": "Child1c"}
                            ]
                        },
                        {
                            "title": "Child2",
                            "children": [
                                {"title": "Child2a"},
                                {"title": "Child2b"},
                                {"title": "Child2c"}
                            ]
                        }
                    ]
                }
            `);

function recurse(u, j) {

  var li = document.createElement('li');
  var ul = document.createElement('ul');

  li.setAttribute('title', j.title);

  li.appendChild(ul);
  u.appendChild(li);

  (j.children || []).forEach(c => {
    recurse(ul, c);
  });

}

recurse(document.getElementById('tree'), db);

* {
  margin: 0;
}

li::before {
  content: attr(title);
}

li:hover {
  cursor: grab;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Scratch</title>
</head>

<body>
  <ul id='tree'></ul>
</body>

</html>

Yes, you don't need `let` for this. The good old `var` is just sufficient most of the times. — Redu, Nov 23 '21 at 20:12
@Redu thank you. yea i tried both and they worked currently googling the difference between the two. — eleethesontai, Nov 23 '21 at 20:48
I typically only use let when declaring a variable in a loop or a block scope and i know i won't need it after the loop or block. — I wrestled a bear once., Nov 23 '21 at 21:23

Nested List from Javascript

1 Answers1