Need help with nested dropdowns

1

Hi there,

I have been trying to create a directory tree structure lookalike on the front end. but I do not know why it does not seem to work. Suppose I extract my folder details/path from :

https://api.github.com/repos/AdityaOli/Execute-untrusted-code-online-using-the-hackerrank-API/git/trees/master?recursive=1

This is what I get once I get the path of files and folders(blob and trees).

Images
Images/Readme.md
Images/Tut img 1.PNG
Images/Tut img 2.PNG
Images/Tut img 3.PNG
Images/Tut img 4.PNG
Images/Tut img 5.PNG
Readme.md
hackerrank-sdk
hackerrank-sdk/LICENSE.txt
hackerrank-sdk/hackerrank
hackerrank-sdk/hackerrank/HackerRankAPI.py
hackerrank-sdk/hackerrank/__init__.py
hackerrank-sdk/hackerrank/testing.py
hackerrank-sdk/setup.cfg
hackerrank-sdk/setup.py

I am trying to make it look like it has folders as dropdowns or lookalike, and click on each folder slides down to show its contents. This is what I wrote

 $.ajax({
    url:
      "https://api.github.com/repos/AdityaOli/Execute-untrusted-code-online-using-the-hackerrank-API/git/trees/master?recursive=1",
    cache: false,
    dataType: "json",
    success: function(data) {
      for (let i = 0; i < data.tree.length; i++) {
          if (data.tree[i].type == "tree")
          {
              if (!data.tree[i].path.includes("/")) {
                  //$("#localRepo").append("<table class='table' id='" + data.tree[i].path + "'><thead><tr><th>" + data.tree[i].path + "</th></tr></thead ></table>");
                  $("#localRepo").append("<div class='dropdown'><button class='btn btn-default dropdown-toggle' type ='button' id ='"
                      + data.tree[i].path + "' data-toggle='dropdown'> "
                      + data.tree[i].path + "<span class='caret'>"
                      + "</span ></button > <ul class='dropdown-menu dropdown-menu-right' role='menu' id='" + data.tree[i].path+"_menu' aria-labelledby="
                      + data.tree[i].path + "></ul>");
              }
              else { 
                  var elementSplitList = data.tree[i].path.split("/");
                  var parent = elementSplitList[elementSplitList.length - 2];
                  var child = elementSplitList[elementSplitList.length - 1];
                  $("#" + parent + "_menu").append("<li class='dropdown-submenu'>"+
                      "<a class='' tabindex='-1' href='#'>"+ child +" <span class='caret'></span></a>"+
                      "<ul id='" + child + "_menu' class='dropdown-menu'></ul></li>");
              }    
          }
        else { 
              var elementSplitList = data.tree[i].path.split("/");
              var parent = elementSplitList[elementSplitList.length - 2];
              var blob = elementSplitList[elementSplitList.length - 1];
              $("#" + parent + "_menu").append("<li role='presentation'><a role='menuitem' tabindex='-1' href='#'>" + blob + "</a></li>");
          }
          $("#localRepo").append("</div>");
      }
    },
    error: function(e, xhr) {
      console.log("Oops! Error");
    }
  });

But any nested dropdown on clicking, closes its parent as well. Hence I am unable to view the folder contents after a particular level. I would appreciate if anyone could help.

2

You’ve got data-toggle targeting the class dropdown. Everything has that class, so everything gets targeted. You can modify the class and target by concatenating the loop’s index. Something like:

$("element").append("<div class='dropdown" + i + "'>...")