CODEWITHSUNDEEP
javascripthtmljsonparsingobject
Dzianis Kurhan
Dzianis Kurhan

Reputation: 23

How to render nested list in HTML from JavaScript object?

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

Upvotes: 1

Views: 5611

Answers (1)

Nina Scholz
Nina Scholz

Reputation: 386570

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>

Upvotes: 3

Related Questions