How to Access to the id field to perform lazyLoad Function #103

gioisco · 2024-09-13T15:56:59Z

gioisco
Sep 13, 2024

I want to show you how to use lazyLoad for load children by id (with AJAX call).

I created a simple REST API that return the following data (the children of node root /):

[
  {
    "id": 9,
    "title": "dir1",
    "type": "DIRECTORY",
    "lazy": true
  }
]

I would like to call my other REST API at /json/{id}, with id=9, to retrieve the contents of directory dir1.
In this example, I successfully called my REST API because I accessed e.node.data.id and not e.node.id, which is undefined.

<script>
  document.addEventListener("DOMContentLoaded", (event) => {
    const tree = new mar10.Wunderbaum({
      element: document.getElementById("tree"),
      checkbox: true,
      selectMode: "hier",
      source: [
                {
                  "id": 9,
                  "title": "dir1",
                  "type": "DIRECTORY",
                  "lazy": true
                }
              ],
      lazyLoad: function (e) {
        console.log(e.node.id);
        console.log(e.node.data.id);
        return { url: `json/` + e.node.data.id }
      }
    });
  });
</script>

This is because native node members are identified by node.key and node.refKey, and all other properties are added under node.data, e.g., node.data.id.

Following is a complete example with a simulation of an AJAX call:

<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/wunderbaum@0/dist/wunderbaum.min.css"
    />
    <script
      defer
      src="https://cdn.jsdelivr.net/npm/wunderbaum@0/dist/wunderbaum.umd.min.js"
    ></script>
    <!-- Your application code -->
    <script>
      // Simulation of an API call for lazy loading
      function fetchLazyData(id) {
        return new Promise((resolve) => {
          setTimeout(() => {
            let lazyData;

            if (id === 9) {
              lazyData = [
                {
                  id: 101,
                  title: "lazy_file_1"
                },
                {
                  id: 102,
                  title: "lazy_file_2"
                },
              ];
            } else {
              lazyData = [
                {
                  id: 301,
                  title: "default_file_1"
                },
                {
                  id: 302,
                  title: "default_file_2"
                },
              ];
            }
            resolve(lazyData);
          }, 1000); // Simulate a 1-second delay
        });
      }


      document.addEventListener("DOMContentLoaded", (event) => {
        const tree = new mar10.Wunderbaum({
          element: document.getElementById("demo-tree"),
          checkbox: true,
          selectMode: "hier",
          source: [
            {
              id: 9,
              title: "dir1",
              lazy: true, // Set lazy loading for dir1
            },
            {
              id: 11,
              title: "dir2",
              lazy: true, // Set lazy loading for dir2
            },
            {
              id: 12,
              title: "file1",
            },
          ],
          lazyLoad: function (e) {
            // Call the API for fetching child nodes based on the provided node ID
            // return { url: `json/` + e.node.data.id }
            
            // Simulation of an API call with the provided id
            return fetchLazyData(e.node.data.id);
          }
        });
      });
    </script>
  </head>

  <body>
    <h1>Wunderbaum</h1>
    <div
      id="demo-tree"
      class="wb-skeleton wb-initializing wb-fade-expander"
    ></div>
  </body>
</html>

mar10 · 2024-09-13T16:02:39Z

mar10
Sep 13, 2024
Maintainer

Native node members are node.key and node.refKey.
All other properties are added to node.data, e.g. node.data.id

1 reply

gioisco Sep 13, 2024
Author

I wrote this example, and I believe it would be a valuable addition to the documentation. If you agree, I’d be happy to take care of integrating it myself.

<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/wunderbaum@0/dist/wunderbaum.min.css"
    />
    <script
      defer
      src="https://cdn.jsdelivr.net/npm/wunderbaum@0/dist/wunderbaum.umd.min.js"
    ></script>
    <!-- Your application code -->
    <script>
      // Simulation of an API call for lazy loading
      function fetchLazyData(id) {
        return new Promise((resolve) => {
          setTimeout(() => {
            let lazyData;

            if (id === 9) {
              lazyData = [
                {
                  id: 101,
                  title: "lazy_file_1"
                },
                {
                  id: 102,
                  title: "lazy_file_2"
                },
              ];
            } else {
              lazyData = [
                {
                  id: 301,
                  title: "default_file_1"
                },
                {
                  id: 302,
                  title: "default_file_2"
                },
              ];
            }
            resolve(lazyData);
          }, 1000); // Simulate a 1-second delay
        });
      }


      document.addEventListener("DOMContentLoaded", (event) => {
        const tree = new mar10.Wunderbaum({
          element: document.getElementById("demo-tree"),
          checkbox: true,
          selectMode: "hier",
          source: [
            {
              id: 9,
              title: "dir1",
              lazy: true, // Set lazy loading for dir1
            },
            {
              id: 11,
              title: "dir2",
              lazy: true, // Set lazy loading for dir2
            },
            {
              id: 12,
              title: "file1",
            },
          ],
          lazyLoad: function (e) {
            // Call the API for fetching child nodes based on the provided node ID
            // return { url: `get/child/nodes/` + e.node.data.id }
            
            // Simulation of an API call with the provided id
            return fetchLazyData(e.node.data.id);
          }
        });
      });
    </script>
  </head>

  <body>
    <h1>Wunderbaum</h1>
    <div
      id="demo-tree"
      class="wb-skeleton wb-initializing wb-fade-expander"
    ></div>
  </body>
</html>

mar10 · 2024-09-16T19:03:58Z

mar10
Sep 16, 2024
Maintainer

Thank you for the contribution, I appreciate your support!

There is already a related demo here (source code).

How about starting to use the discussion category "Show and tell" for real-world solutions that we publicly share?
I already changed the category, and you could modify the title and body a bit.
Others can find, use, and comment here.
What do you think?

1 reply

gioisco Sep 17, 2024
Author

Hi Martin, I've updated the discussion. I've also included the example I produced.

All the best.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

How to Access to the id field to perform lazyLoad Function #103

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

How to Access to the id field to perform lazyLoad Function #103

Uh oh!

Uh oh!

gioisco Sep 13, 2024

Replies: 2 comments · 2 replies

Uh oh!

mar10 Sep 13, 2024 Maintainer

Uh oh!

Uh oh!

gioisco Sep 13, 2024 Author

Uh oh!

mar10 Sep 16, 2024 Maintainer

Uh oh!

gioisco Sep 17, 2024 Author

gioisco
Sep 13, 2024

Replies: 2 comments 2 replies

mar10
Sep 13, 2024
Maintainer

gioisco Sep 13, 2024
Author

mar10
Sep 16, 2024
Maintainer

gioisco Sep 17, 2024
Author