Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Follow
Facebook Twitter Instagram Youtube
Contact

dynamically create title, child, subchild elements in array from a array of object

byMR
April 14, 2023

trying to achieve result where the title, child, subchild and therefore gets match and create a new array as shown below.

how can we add this data into table showing title, child, subchild as shown in the pictureenter image description here

here i’m facing the issue that the project structure is dynamic and can have n number of files, folders, subfolders etc.
any suggestions on this problem?.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel 

let a = [
  {
      "id": "1",
      "name": "public",
      "type": "tree",
      "path": "public",
      "mode": "040000"
  },
  {
      "id": "2",
      "name": "src",
      "type": "tree",
      "path": "src",
      "mode": "040000"
  },
  {
      "id": "3",
      "name": "assests",
      "type": "tree",
      "path": "src/assests",
      "mode": "040000"
  },
  {
      "id": "4",
      "name": "components",
      "type": "tree",
      "path": "src/components",
      "mode": "040000"
  },
  {
      "id": "5",
      "name": "store",
      "type": "tree",
      "path": "src/store",
      "mode": "040000"
  },
  {
      "id": "6",
      "name": "modules",
      "type": "tree",
      "path": "src/store/modules",
      "mode": "040000"
  },
  {
      "id": "7",
      "name": "notification",
      "type": "tree",
      "path": "src/store/modules/notification",
      "mode": "040000"
  },
  {
      "id": "8",
      "name": "projectDetails",
      "type": "tree",
      "path": "src/store/modules/projectDetails",
      "mode": "040000"
  },
  {
      "id": "9",
      "name": "LICENSE",
      "type": "blob",
      "path": "LICENSE",
      "mode": "100644",
      "licenseData": [
          "GNU AFFERO GENERAL PUBLIC LICENSE",
          "Version 3, 19 November 2007",
          "",
          "Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>"
      ]
  },
  {
      "id": "10",
      "name": "README.md",
      "type": "blob",
      "path": "README.md",
      "mode": "100644"
  },
  {
      "id": "11",
      "name": "babel.config.js",
      "type": "blob",
      "path": "babel.config.js",
      "mode": "100644"
  },
  {
      "id": "12",
      "name": "jsconfig.json",
      "type": "blob",
      "path": "jsconfig.json",
      "mode": "100644"
  },
  {
      "id": "13",
      "name": "package-lock.json",
      "type": "blob",
      "path": "package-lock.json",
      "mode": "100644"
  },
  {
      "id": "14",
      "name": "package.json",
      "type": "blob",
      "path": "package.json",
      "mode": "100644"
  },
  {
      "id": "15",
      "name": "favicon.ico",
      "type": "blob",
      "path": "public/favicon.ico",
      "mode": "100644"
  },
  {
      "id": "16",
      "name": "index.html",
      "type": "blob",
      "path": "public/index.html",
      "mode": "100644"
  },
  {
      "id": "17",
      "name": "publiccode.yml",
      "type": "blob",
      "path": "publiccode.yml",
      "mode": "100644"
  },
  {
      "id": "18",
      "name": "App.vue",
      "type": "blob",
      "path": "src/App.vue",
      "mode": "100644"
  },
  {
      "id": "19",
      "name": "logo.png",
      "type": "blob",
      "path": "src/assests/logo.png",
      "mode": "100644"
  },
  {
      "id": "20",
      "name": "dashboard.vue",
      "type": "blob",
      "path": "src/components/dashboard.vue",
      "mode": "100644"
  },
  {
      "id": "21",
      "name": "home.vue",
      "type": "blob",
      "path": "src/components/home.vue",
      "mode": "100644"
  },
  {
      "id": "22",
      "name": "main.js",
      "type": "blob",
      "path": "src/main.js",
      "mode": "100644"
  },
  {
      "id": "23",
      "name": "index.js",
      "type": "blob",
      "path": "src/store/index.js",
      "mode": "100644"
  },
  {
      "id": "24",
      "name": "action.js",
      "type": "blob",
      "path": "src/store/modules/notification/action.js",
      "mode": "100644"
  },
  {
      "id": "25",
      "name": "getters.js",
      "type": "blob",
      "path": "src/store/modules/notification/getters.js",
      "mode": "100644"
  },
  {
      "id": "26",
      "name": "index.js",
      "type": "blob",
      "path": "src/store/modules/notification/index.js",
      "mode": "100644"
  },
  {
      "id": "27",
      "name": "mutation.js",
      "type": "blob",
      "path": "src/store/modules/notification/mutation.js",
      "mode": "100644"
  },
  {
      "id": "28",
      "name": "action.js",
      "type": "blob",
      "path": "src/store/modules/projectDetails/action.js",
      "mode": "100644"
  },
  {
      "id": "29",
      "name": "getters.js",
      "type": "blob",
      "path": "src/store/modules/projectDetails/getters.js",
      "mode": "100644"
  },
  {
      "id": "30",
      "name": "index.js",
      "type": "blob",
      "path": "src/store/modules/projectDetails/index.js",
      "mode": "100644"
  },
  {
      "id": "31",
      "name": "mutation.js",
      "type": "blob",
      "path": "src/store/modules/projectDetails/mutation.js",
      "mode": "100644"
  },
  {
      "id": "32",
      "name": "vue.config.js",
      "type": "blob",
      "path": "vue.config.js",
      "mode": "100644"
  }
]

>Solution :

You can do it like this:

$.each(a, function() {
  var item = this;
  var isRoot = item.path.indexOf("/") == -1;
  if (isRoot) {
    $("#tree").append(`<li data-path="${item.path}">${item.name}</li>`);
  } else {
    let splicedStr = item.path.substring(0, item.path.lastIndexOf("/"));
    var target = $("#tree").find(`li[data-path='${splicedStr}']`);
    if (target) {
      if (target.find("ul").length == 0)
        target.append("<ul></ul>")

      $("ul", target).append(`<li data-path="${item.path}">${item.name}</li>`);
    }
  }
})

This will loop over each item in your array, and insert it in the ul, depending on the item’s path.

Note this is not bullet proof and is depending on the order of your array, but it should give you a good start.

Demo

let a = [{
    "id": "1",
    "name": "public",
    "type": "tree",
    "path": "public",
    "mode": "040000"
  },
  {
    "id": "2",
    "name": "src",
    "type": "tree",
    "path": "src",
    "mode": "040000"
  },
  {
    "id": "3",
    "name": "assests",
    "type": "tree",
    "path": "src/assests",
    "mode": "040000"
  },
  {
    "id": "4",
    "name": "components",
    "type": "tree",
    "path": "src/components",
    "mode": "040000"
  },
  {
    "id": "5",
    "name": "store",
    "type": "tree",
    "path": "src/store",
    "mode": "040000"
  },
  {
    "id": "6",
    "name": "modules",
    "type": "tree",
    "path": "src/store/modules",
    "mode": "040000"
  },
  {
    "id": "7",
    "name": "notification",
    "type": "tree",
    "path": "src/store/modules/notification",
    "mode": "040000"
  },
  {
    "id": "8",
    "name": "projectDetails",
    "type": "tree",
    "path": "src/store/modules/projectDetails",
    "mode": "040000"
  },
  {
    "id": "9",
    "name": "LICENSE",
    "type": "blob",
    "path": "LICENSE",
    "mode": "100644",
    "licenseData": [
      "GNU AFFERO GENERAL PUBLIC LICENSE",
      "Version 3, 19 November 2007",
      "",
      "Copyright (C) 2007 Free Software Foundation, Inc. &lt;https:&#x2F;&#x2F;fsf.org&#x2F;&gt;"
    ]
  },
  {
    "id": "10",
    "name": "README.md",
    "type": "blob",
    "path": "README.md",
    "mode": "100644"
  },
  {
    "id": "11",
    "name": "babel.config.js",
    "type": "blob",
    "path": "babel.config.js",
    "mode": "100644"
  },
  {
    "id": "12",
    "name": "jsconfig.json",
    "type": "blob",
    "path": "jsconfig.json",
    "mode": "100644"
  },
  {
    "id": "13",
    "name": "package-lock.json",
    "type": "blob",
    "path": "package-lock.json",
    "mode": "100644"
  },
  {
    "id": "14",
    "name": "package.json",
    "type": "blob",
    "path": "package.json",
    "mode": "100644"
  },
  {
    "id": "15",
    "name": "favicon.ico",
    "type": "blob",
    "path": "public/favicon.ico",
    "mode": "100644"
  },
  {
    "id": "16",
    "name": "index.html",
    "type": "blob",
    "path": "public/index.html",
    "mode": "100644"
  },
  {
    "id": "17",
    "name": "publiccode.yml",
    "type": "blob",
    "path": "publiccode.yml",
    "mode": "100644"
  },
  {
    "id": "18",
    "name": "App.vue",
    "type": "blob",
    "path": "src/App.vue",
    "mode": "100644"
  },
  {
    "id": "19",
    "name": "logo.png",
    "type": "blob",
    "path": "src/assests/logo.png",
    "mode": "100644"
  },
  {
    "id": "20",
    "name": "dashboard.vue",
    "type": "blob",
    "path": "src/components/dashboard.vue",
    "mode": "100644"
  },
  {
    "id": "21",
    "name": "home.vue",
    "type": "blob",
    "path": "src/components/home.vue",
    "mode": "100644"
  },
  {
    "id": "22",
    "name": "main.js",
    "type": "blob",
    "path": "src/main.js",
    "mode": "100644"
  },
  {
    "id": "23",
    "name": "index.js",
    "type": "blob",
    "path": "src/store/index.js",
    "mode": "100644"
  },
  {
    "id": "24",
    "name": "action.js",
    "type": "blob",
    "path": "src/store/modules/notification/action.js",
    "mode": "100644"
  },
  {
    "id": "25",
    "name": "getters.js",
    "type": "blob",
    "path": "src/store/modules/notification/getters.js",
    "mode": "100644"
  },
  {
    "id": "26",
    "name": "index.js",
    "type": "blob",
    "path": "src/store/modules/notification/index.js",
    "mode": "100644"
  },
  {
    "id": "27",
    "name": "mutation.js",
    "type": "blob",
    "path": "src/store/modules/notification/mutation.js",
    "mode": "100644"
  },
  {
    "id": "28",
    "name": "action.js",
    "type": "blob",
    "path": "src/store/modules/projectDetails/action.js",
    "mode": "100644"
  },
  {
    "id": "29",
    "name": "getters.js",
    "type": "blob",
    "path": "src/store/modules/projectDetails/getters.js",
    "mode": "100644"
  },
  {
    "id": "30",
    "name": "index.js",
    "type": "blob",
    "path": "src/store/modules/projectDetails/index.js",
    "mode": "100644"
  },
  {
    "id": "31",
    "name": "mutation.js",
    "type": "blob",
    "path": "src/store/modules/projectDetails/mutation.js",
    "mode": "100644"
  },
  {
    "id": "32",
    "name": "vue.config.js",
    "type": "blob",
    "path": "vue.config.js",
    "mode": "100644"
  }
]

$.each(a, function() {
  var item = this;
  var isRoot = item.path.indexOf("/") == -1;
  if (isRoot) {
    $("#tree").append(`<li data-path="${item.path}">${item.name}</li>`);
  } else {
    let splicedStr = item.path.substring(0, item.path.lastIndexOf("/"));
    var target = $("#tree").find(`li[data-path='${splicedStr}']`);
    if (target) {
      if (target.find("ul").length == 0)
        target.append("<ul></ul>")

      $("ul", target).append(`<li data-path="${item.path}">${item.name}</li>`);
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="tree"></ul>
byMR
Published
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Read more

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading