Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

JavaScriptでツリー化するオブジェクトのフラット配列

このようなオブジェクトの配列があるとします-

const arr = [
   { id: '1', name: 'name 1', parentId: null },
   { id: '2', name: 'name 2', parentId: null },
   { id: '2_1', name: 'name 2_1', parentId: '2' },
   { id: '2_2', name: 'name 2_2', parentId: '2' },
   { id: '3', name: 'name 3', parentId: null },
   { id: '4', name: 'name 4', parentId: null },
   { id: '5', name: 'name 5', parentId: null },
   { id: '6', name: 'name 6', parentId: null },
   { id: '7', name: 'name 7', parentId: null },
   { id: '1_1', name: 'name 1_1', parentId: '1' },
   { id: '1_2', name: 'name 1_2', parentId: '1' },
   { id: '1_3', name: 'name 1_3', parentId: '1' },
   { id: '1_4', name: 'name 1_4', parentId: '1' },
   { id: '1_5', name: 'name 1_5', parentId: '1' },
   { id: '2_1_1', name: 'name 2_1_1', parentId: '2_1' },
   { id: '2_1_2', name: 'name 2_1_2', parentId: '2_1' },
   { id: '2_1_3', name: 'name 2_1_3', parentId: '2_1' },
   { id: '2_1_4', name: 'name 2_1_4', parentId: '2_1' },
   { id: '2_1_5', name: 'name 2_1_5', parentId: '2_1' },
];

そのようなオブジェクトの配列を1つ取り込むJavaScript関数を作成する必要があります。次に、関数は、子を親オブジェクトにリンクするこの配列に基づいてツリーデータ構造を構築し、結果をネストされたリスト形式で画面に表示する必要があります。

例

このためのコードは-

になります

HTMLコード − 

<html>
   <head></head>
   <body>
      <div id = "tree">
      </div>
   </body>
</html>

JavaScriptコード − 

const arr = [
   { id: '1', name: 'name 1', parentId: null },
   { id: '2', name: 'name 2', parentId: null },
   { id: '2_1', name: 'name 2_1', parentId: '2' },
   { id: '2_2', name: 'name 2_2', parentId: '2' },
   { id: '3', name: 'name 3', parentId: null },
   { id: '4', name: 'name 4', parentId: null },
   { id: '5', name: 'name 5', parentId: null },
   { id: '6', name: 'name 6', parentId: null },
   { id: '7', name: 'name 7', parentId: null },
   { id: '1_1', name: 'name 1_1', parentId: '1' },
   { id: '1_2', name: 'name 1_2', parentId: '1' },
   { id: '1_3', name: 'name 1_3', parentId: '1' },
   { id: '1_4', name: 'name 1_4', parentId: '1' },
   { id: '1_5', name: 'name 1_5', parentId: '1' },
   { id: '2_1_1', name: 'name 2_1_1', parentId: '2_1' },
   { id: '2_1_2', name: 'name 2_1_2', parentId: '2_1' },
   { id: '2_1_3', name: 'name 2_1_3', parentId: '2_1' },
   { id: '2_1_4', name: 'name 2_1_4', parentId: '2_1' },
   { id: '2_1_5', name: 'name 2_1_5', parentId: '2_1' },
]
const tree = document.getElementById("tree")
arr.forEach(a => {
   const div = document.createElement("div")
   if (a.parentId === null) {
      div.classList.add("parent")
      div.setAttribute("id", `id${a.id}`)
      div.innerText = a.name
      tree.appendChild(div)
   }
   else {
      const parent = document.getElementById(`id${a.parentId}`)
      if (!parent.classList.contains("parent")) {
         parent.classList.add("parent")
      }
      console.log(`${a.id} `, parent)
      let childContainer = null
      if (parent.childElementCount === 0) {
         childContainer = document.createElement("div")
         childContainer.classList.add("childContainer")
         parent.appendChild(childContainer)
         childContainer.classList.add("hidden")
      }
      else {
         childContainer = document.querySelector(`#id${a.parentId}
         .childContainer`)
      }
      div.classList.add("child")
      div.setAttribute("id", `id${a.id}`)
      div.innerText = a.name
      childContainer.appendChild(div)
   }
})
const parents =
Array.from(document.getElementsByClassName("parent")).filter(p =>
p.childElementCount !== 0)
parents.forEach(p => {
   p.addEventListener("click", function(e) {
      e.preventDefault()
      const container = this.getElementsByClassName("childContainer")[0]
      container.classList.toggle("visible")
      e.stopPropagation()
   })
})

CSSコード − 

.parent, .child {
   cursor: pointer;
}
.parent {
   margin: 10px 0;
   font-size: 1.3rem;
}
.parent::before {
   content: "\25BA";
   margin-right: 10px;
}
.childContainer {
   margin-left: 20px;
   display: none;
}
.childContainer.visible {
   display: block;
}
.child {
   font-size: 1rem;
}
.child::before {
   content: "\25BA";
}

そして、画面上の出力は-

になります

JavaScriptでツリー化するオブジェクトのフラット配列


  1. JavaScriptオブジェクトの配列で配列のメソッドを使用していますか？

    以下は、JavaScriptオブジェクトの配列で配列のメソッドを使用するためのコードです- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <styl

  2. JavaScriptでオブジェクトプロパティ名の配列を置き換える

    以下は、JavaScriptでオブジェクトプロパティ名の配列を置き換えるコードです- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style&g