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
– Barmar, Commented Nov 23, 2021 at 20:06
@pilchard It's not a typo. But reproducible and exemplary :) — Gleb Kemarsky
– Gleb Kemarsky, Commented Nov 23, 2021 at 20:15

I wrestled a bear once. · Accepted Answer · 2021-11-23 20:09:43Z

2

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>

answered Nov 23, 2021 at 20:09

I wrestled a bear once.

23.5k20 gold badges74 silver badges122 bronze badges

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

3 Comments

Redu Over a year ago

Yes, you don't need let for this. The good old var is just sufficient most of the times.

eleethesontai Over a year ago

@Redu thank you. yea i tried both and they worked currently googling the difference between the two.

I wrestled a bear once. Over a year ago

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.

Collectives™ on Stack Overflow

Nested List from Javascript

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related