객체를 트리로 만들기

let data = {
  Fish: {
    trout: {},
    salmon: {},
  },

  Tree: {
    Huge: {
      sequoia: {},
      oak: {},
    },
    Flowering: {
      "apple tree": {},
      magnolia: {},
    },
  },
};

function createTree(obj) {
  // 독립 실행형 재귀함수
  let li = "";
  let ul;
  for (let key in obj) {
    li += "<li>" + key + createTree(obj[key]) + "</li>";
  }
  if (li) {
    ul = "<ul>" + li + "</ul>";
  }
  return ul || "";
}


window['container'].innerHTML = createTree(data);

태그문자열로 트리를 만든다음 innerHTML메소드로 DOM에 넣는 방법

let data = {
   Fish: {
      trout: {},
      salmon: {},
   },

   Tree: {
      Huge: {
         sequoia: {},
         oak: {},
      },
      Flowering: {
         "apple tree": {},
         magnolia: {
            age:{}
         },
      },
   },
};

function fn(obj){

   // 객체가 있다면 <ul><li>1</li><li>2</li></ul>와 같이 구성되어야 한다.

   let ul = document.createElement('ul');
   for (const key in obj) {
      let li = document.createElement('li');
      li.append(key);

      // 재귀탈출조건
      if(Object.keys(obj[key]).length){
         li.append(fn(obj[key]));
      }
      ul.append(li);
   }

   return ul;
}

document.body.append(fn(data));

요소노드를 생성해 가면서 트리를 구성한후 append로 DOM에 이동시킨다.