learnJavaScript/createTree.html at main · mikebars1995/learnJavaScript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html>
<body>

  <div id="container"></div>

  <script>
    let data = {
      "Рыбы": {
        "форель": {},
        "лосось": {}
      },

      "Деревья": {
        "Огромные": {
          "секвойя": {},
          "дуб": {}
        },
        "Цветковые": {
          "яблоня": {},
          "магнолия": {}
        }
      }
    };

    function createTree(container, obj) {
      container.innerHTML = createTreeText(obj);
    }

    function createTreeText(obj) { // отдельная рекурсивная функция
      let li = '';
      let ul;
      for (let key in obj) {
        li += '<li>' + key + createTreeText(obj[key]) + '</li>';
      }
      if (li) {
        ul = '<ul>' + li + '</ul>'
      }
      return ul || '';
    }

    createTree(container, data);


    // function createTree(container, obj) {
    //   container.append(createTreeDom(obj));
    // }

    // function createTreeDom(obj) {
    //   // если нет дочерних элементов, то вызов возвращает undefined
    //   // и элемент <ul> не будет создан
    //   if (!Object.keys(obj).length) return;

    //   let ul = document.createElement('ul');

    //   for (let key in obj) {
    //     let li = document.createElement('li');
    //     li.innerHTML = key;

    //     let childrenUl = createTreeDom(obj[key]);
    //     if (childrenUl) {
    //       li.append(childrenUl);
    //     }

    //     ul.append(li);
    //   }

    //   return ul;
    // }

    // let container = document.getElementById('container');
    // createTree(container, data);


  </script>
</body>
</html>