Question 238976 in Html Question posted in
Some basic documentation can be found here.

how genrerate tree folder with html, css and javascript

I have the following data

const data = {
    name: "Root",
    children: [
        {
            name: "Folder 1",
            children: [
                {
                    name: "Folder 1-1",
                },
                {
                    name: "Folder 1-2",
                },
            ],
        },
        {
            name: "Folder 2",
            children: [
                {
                    name: "Folder 2-1",
                },
                {
                    name: "Folder 2-2",
                },
            ],
        },
    ],
};

how do i just use javascript to generate html tags like below. Please help me, thank you all!

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tree folder</title>
    <link rel="stylesheet" href="../main.css">
</head>
<style>
    .children-list {
        padding-left: 12px;
    }
</style>

<body>
    <div class="static-page">
        <div class="container">
            <div class="tree">
                <div class="flex items-center gap-x-12 font-bold">
                    <span>-</span>
                    <span>Root</span>
                </div>
                <div class="children-list">
                    <div class="children-item">
                        <div class="flex items-center gap-x-12 font-bold">
                            <span>-</span>
                            <span>Folder 1</span>
                        </div>
                        <div class="children-list">
                            <div>
                                <div class="flex items-center gap-x-12 font-bold">
                                    <span>-</span>
                                    <span>Folder 1 - 1</span>
                                </div>
                            </div>
                            <div>
                                <div class="flex items-center gap-x-12 font-bold">
                                    <span>-</span>
                                    <span>Folder 1 - 2</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="children-item">
                        <div class="flex items-center gap-x-12 font-bold">
                            <span>-</span>
                            <span>Folder 2</span>
                        </div>
                        <div class="children-list">
                            <div>
                                <div class="flex items-center gap-x-12 font-bold">
                                    <span>-</span>
                                    <span>Folder 2 - 1</span>
                                </div>
                            </div>
                            <div>
                                <div class="flex items-center gap-x-12 font-bold">
                                    <span>-</span>
                                    <span>Folder 2 - 2</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="./index.js"></script>

</html>
Tags:

2

Answers


  1. 0

    By using for loop. Like:

    for(i = 0; i < data.children.length; i++) {
  // You can create here a div and give it the name
  let div = document.createElement("div");
  div.className = "flex items-center gap-x-12 font-bold";
  // .... And continue adding your classes and then append
}
    Login or Signup to reply.
  2. 0

    Something like this – a recursive function that walks your data and creates elements and puts them where they belong:

    const data = {
  name: "Root",
  children: [
    {
      name: "Folder 1",
      children: [
        {
          name: "Folder 1-1",
        },
        {
          name: "Folder 1-2",
        },
      ],
    },
    {
      name: "Folder 2",
      children: [
        {
          name: "Folder 2-1",
        },
        {
          name: "Folder 2-2",
        },
      ],
    },
  ],
};

function makeEl(tag, props) {
  const el = document.createElement(tag);
  Object.assign(el, props);
  return el;
}

function walk(dest, node) {
  const el = makeEl("div", {
    className: "flex items-center gap-x-12 font-bold",
  });
  el.appendChild(
    makeEl("span", {
      innerText: "-",
    }),
  );
  el.appendChild(
    makeEl("span", {
      innerText: node.name,
    }),
  );
  dest.appendChild(el);
  if (node.children && node.children.length) {
    const cList = makeEl("div", {
      className: "children-list",
    });
    dest.appendChild(cList);
    for (const child of node.children) {
      const chNode = makeEl("div", {
        className: "children-item",
      });
      cList.appendChild(chNode);
      walk(chNode, child);
    }
  }
}

walk(document.querySelector(".tree"), data);
    .children-list {
  padding-left: 12px;
}
    <div class="static-page">
  <div class="container">
    <div class="tree">
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search