How to render nested list in HTML from JavaScript object?

Question

I have an object, which looks like this:

let obj = {
  name: "name1",
  nest: [
    {
      name: "name2",
      nest: [
        {
          name: "name3"
        },
        {
          name: "name4",
          nest: [
            {
              name: "name5",
              nest: [
                {
                  name: "name6"
                }
              ]
            },
            {
              name: "name7"
            },
            {
              name: "name8"
            }
          ]
        }
      ]
    }
  ]
}

let parent = document.querySelector("ul");

function forOf (obj) {
	for (let key in obj) {
		if ( typeof obj[key] === "object" && obj.hasOwnProperty("nest") ) {
			createList(obj[name], obj[key]);
		} else if ( typeof obj[key] !== "object" ) {
			let item = document.createElement("li");
			item.textContent = obj[key];
			parent.appendChild(item);
		} else {
			forOf(obj[key]);
		}
	}
}

function createList(obj, skills) {
	let item = document.createElement("ul");
	item.textContent = obj;
	parent.appendChild(item);
	parent = item;
	forOf(skills);
}

forOf(obj);

I need to render tree of nested unordered lists. I parsed my object, but I can't render it in right way. I can't resolve problem with parent item for every nested list. Maybe, you have any ideas how to fix it?

I want to get result like this: example

Please be more specific about your desired behavior, how that differs from what you are getting, and what you've tried so far. — jered
– jered, Commented Dec 13, 2017 at 20:00
Yes, of course: desired behavior is proper rendering of nested lists, with different levels of nesting. Like this: i.sstatic.net/bjuI6.png — Dzianis Kurhan
– Dzianis Kurhan, Commented Dec 13, 2017 at 20:06

Nina Scholz · Accepted Answer · 2017-12-13 20:17:11Z

3

You could use a single loop with just the defined keys for the value and the nest array as children.

function createList(parent, array) {
    array.forEach(function (o) {
        var li = document.createElement("li"),
            ul;

        li.textContent = o.name;
        parent.appendChild(li);
        if (o.nest) {
            ul = document.createElement("ul");
            li.appendChild(ul);
            createList(ul, o.nest);
        }
    });
}

var  object = { name: "name1", nest: [{ name: "name2", nest: [{ name: "name3" }, { name: "name4", nest: [{ name: "name5", nest: [{ name: "name6" }] }, { name: "name7" }, { name: "name8" }] }] }] }

createList(document.querySelector("ul"), [object]);

<ul></ul>

answered Dec 13, 2017 at 20:17

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

Collectives™ on Stack Overflow

How to render nested list in HTML from JavaScript object?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related