객체로부터 트리(tree) 생성하기

중첩된 객체의 데이터로 ul·li 리스트를 생성하는 createTree 함수를 만들어 보세요.

예시:

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

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

코드 형식:

          let container = document.getElementById('container');
createTree(container, data); // container 요소 내에 트리를 생성합니다.
        

결과물이 될 트리는 이런 모습이어야 합니다.

두 방법 중 원하는 방법으로 과제를 해결해 보세요.

전체 트리를 생성한 후 container.innerHTML 로 컨테이너에 추가합니다.
노드를 각각 생성한 후 DOM 메서드를 사용해 컨테이너에 추가합니다.

두 방법을 모두 사용해보면 더 좋습니다.

내용이 없는 <ul></ul>처럼 ‘불필요한’ 요소가 트리에 존재해서는 안된다는 점을 참고하세요.

샌드박스를 열어 정답을 작성해보세요.

객체를 순회하는 가장 쉬운 방법은 재귀를 사용하는 것입니다.