根据对象的关键结构生成元素

Question

我有一个多维对象。现在我想根据这个对象的关键结构生成 DOM 个元素。

作为默认视图，所有主键都应显示为 div 个元素。单击此元素之一，divs 应替换为单击键的直接子项。

我当前的版本是这样的

对象：

let object = {
    "1.0": {
        "1.0.1": {},
        "1.0.2": {},
    },
    "1.1": {
        "1.1.1": {
            "1.1.1.1": {},
        },
        "1.1.2": {},
    },   
};

这是我为每个键生成 DOM 个元素的递归函数：

function categoryTree(obj) {
    for (var key in obj) {
        categoryContainer.innerHTML += "<div>" + key + "</div>";
        categoryTree(obj[key]);
    }
}

现在，我不知道如何进行交互并仅在单击父键时显示子键。

Answer 1

只需使用DOM方法：

const n = (type, settings = {}) => Object.assign(document.createElement(type), settings);

function treeNode(name, children) {
  const text = n("p", { textContent: name });

  const container = n("div");
  container.style.display = "none";
  for(const [childName, child] of Object.entries(children))
    container.appendChild(treeNode(childName, child));

  const node = n("div");
  node.appendChild(text);
  node.appendChild(container);

  node.onclick = () => container.style.display = "block";

  return node;
}

categoryContainer.appendChild(treeNode("root", object));

Answer 2

您可以使用 createElement 和 for...in 循环构建嵌套的 html 结构。然后您还可以在 div 上添加事件侦听器，这将切换其子项 display 属性.

let object = {
  "1.0": {
    "1.0.1": {},
    "1.0.2": {}
  },
  "1.1": {
    "1.1.1": {
      "1.1.1.1": {}
    },
    "1.1.2": {}
  }
}

let categoryContainer = document.querySelector(".categoryContainer")

function categoryTree(obj, parent, start = true) {
  for (var key in obj) {
    let div = document.createElement("div");
    div.textContent = key;
    if (parent.children) parent.className += " bold";
    if (!start) div.className = "normal hide"

    div.addEventListener('click', function(e) {
      e.stopPropagation()
      Array.from(div.children).forEach(child => {
        child.classList.toggle('hide')
      })
    })
    categoryTree(obj[key], div, false)
    parent.appendChild(div)
  }
}


categoryTree(object, categoryContainer)

.hide {display: none;}
.normal {font-weight: normal;}
.bold {font-weight: bold;}

<div class="categoryContainer"></div>

根据对象的关键结构生成元素

generate elements based on key structure of object

javascript

recursion

dynamically-generated