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

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

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 2 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

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

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

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