Only 1 folder called in jstree

Question

I'm currently trying the jstree to list my folders in my Dropbox API, but only 1 folder is being display but I have to 2 folders in my dropbox.. But when I console the function console.log(entry); the reposnse is the 2 folders being shown, but when I put the function to the data of the jstree only 1 folder is being display and the folder is the last reposnse in the console.log(entry);

var dbx = new Dropbox({ accessToken: access_token1 });
dbx.filesListFolder({ path: "" })
  .then(function(response) {

    response.entries.forEach(function(entry) {
      if (entry.tag == 'folder') {
        entry.parent = '#'
      }
      entry.text = entry.name
      console.log(entry);
      console.log(entry.name);

      $("#people").jstree({
        // generating tree from json data
        "json_data": {
          "data": {
            "data": entry.name,
            "state": "closed",
          },

        },
        // plugins used for this tree
        "plugins": ["json_data", "ui", "types", "crrm"]
      })

      .bind("loaded.jstree", function() {
          // do stuff when tree is loaded
          $("#people").addClass("jstree-sugar");
          $("#people > ul").addClass("list");
          $("#people > ul > li > a").addClass("jstree-clicked");
        })
        .bind("select_node.jstree", function(e, data) {
          // do stuff when a node is selected
          data.inst.toggle_node(data.rslt.obj);

        });
    })

    ///end of response
  })
  .catch(function(error) {
    console.log(error);
  });

Nikolay Ermakov · Accepted Answer · 2017-02-21T16:54:34.557

You should move the jsTree generation out of the response iteration, otherwise you always see the last folder in the tree only.

If you used jsTree v3, which I guess you don't, you could use the code below. Also check demo - Fiddle Demo.

var dbx = new Dropbox({ accessToken: access_token1 });
dbx.filesListFolder({ path: "" })
  .then(function(response) {

    var nodes = []; // store the nodes

    response.entries.forEach(function(entry) {
      if (entry.tag == 'folder') {
        entry.parent = '#'
      }

      // add nodes to array - you will also need id for every node
      // to properly map files to folders in the tree
      nodes.push({
         id: entry.id,
         parent: entry.parent,
         text: entry.name
      });

      console.log(entry);
      console.log(entry.name);
    })

    // tree config out of the response iteration
    $("#people").jstree({
        // generating tree from json data
        "core": {
          "data": nodes   // pass nodes to tree config
          }
        },
        // plugins used for this tree
        "plugins": ["json_data", "ui", "types", "crrm"]
      })
      .on("loaded.jstree", function() {
        // do stuff when tree is loaded
        $("#people").addClass("jstree-sugar");
        $("#people > ul").addClass("list");
        $("#people > ul > li > a").addClass("jstree-clicked");
      })
      .on("select_node.jstree", function(e, data) {
        // do stuff when a node is selected
        data.inst.toggle_node(data.rslt.obj);

      });


    ///end of response
  })
  .catch(function(error) {
    console.log(error);

  });

Only 1 folder called in jstree

1 Answers1