javascript - 如何在javascript中将json转换为树状文件夹结构

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 4 年前。

Improve this question

我有如下所述的 Json 数据，我需要使用 javascript 将接收到的数据转换为下面提到的输出示例。

[
  {
    "modifed": "2018-09-05T14:33:29.816-04:00",
    "Path": "/index/library/abc"
  },
  {
    "modifed": "2018-09-05T14:33:29.867-04:00",
    "Path": "/index/library/abc_form/abc_thankyou"
  },
  {
    "modifed": "2018-09-05T14:33:29.892-04:00",
    "Path": "/index/library/abc_form/abc_thankyou_d"
  },
  {
    "modifed": "2018-09-05T14:33:29.841-04:00",
    "Path": "/index/library/abc_form"
  },
  {
    "modifed": "2018-09-05T14:33:29.788-04:00",
    "Path": "/index/library/index"
  },
  {
    "modifed": "2018-09-05T14:33:29.763-04:00",
    "Path": "/index/library"
  },
  {
    "modifed": "2018-09-05T14:33:29.565-04:00",
    "Path": "/index/contact/contact-thankyou"
  },
  {
    "modifed": "2018-09-05T14:33:29.511-04:00",
    "Path": "/index/contact"
  },
  {
    "Lastmodifed": "2018-09-05T14:33:29.402-04:00",
    "Path": "/index/downloads/downloads-thank-you"
  },
  {
    "Lastmodifed": "2018-09-05T14:33:29.427-04:00",
    "Path": "/index/downloads/downloads-thank-you-abc"
  },
  {
    "Lastmodifed": "2018-09-05T14:33:29.376-04:00",
    "Path": "/index/downloads"
  },
  {
    "Lastmodifed": "2018-09-05T14:33:25.520-04:00",
    "Path": "/index"
  }
]

这是我正在尝试/旨在实现的输出:

path: "index"
modified : "2018-09-05T14:33:25.520-04:00"
|____ path: "library"
      modified : "2018-09-05T14:33:29.763-04:00"
         |____ path: abc 
               modified : "2018-09-05T14:33:29.816-04:00"
         |____ path: index 
               modified : "2018-09-05T14:33:29.788-04:00"
         |____ path: abc_form 
               modified : "2018-09-05T14:33:29.841-04:00"
                |___ path: abc_thankyou 
                     modified : "2018-09-05T14:33:29.867-04:00"
                |___ path: abc_thankyou_d 
                     modified : "2018-09-05T14:33:29.892-04:00"
|____ path: "contact"
      modified : "2018-09-05T14:33:29.511-04:00"

         |____ path: contact-thankyou 
               modified : "2018-09-05T14:33:29.565-04:00"
|____ path: "downloads"
      modified : "2018-09-05T14:33:29.376-04:00"

         |____ path: downloads-thank-you 
               modified : "2018-09-05T14:33:29.402-04:00"

         |____ path: downloads-thank-you-abc 
               modified : "2018-09-05T14:33:29.427-04:00"

如果有人可以帮助我用 javascipt 编写逻辑，那将是一个很大的帮助。预先感谢您。

Answer 1

您可以使用以下代码。它首先创建一个嵌套结构，其中文件夹名称也是父对象中的键。甚至可以在源结构中遇到修改日期之前创建节点。 reduce 用于遍历单个路径的文件夹，加深对象结构。

这将创建一个如下所示的结构:

{
  "folders": {
    "index": {
      "path": "index",
      "modified": "2018-09-05T14:33:25.520-04:00",
      "folders": {
        "library": {
          "path": "library",
          "modified": "2018-09-05T14:33:29.763-04:00",
          "folders": {
            "abc": {
              "path": "abc",
              "modified": "2018-09-05T14:33:29.816-04:00"
            },
            "abc_form": {
              "path": "abc_form",
              "modified": "2018-09-05T14:33:29.841-04:00",
              "folders": {
                "abc_thankyou": {
                  "path": "abc_thankyou",
                  "modified": "2018-09-05T14:33:29.867-04:00"
                },
                "abc_thankyou_d": {
                  "path": "abc_thankyou_d",
                  "modified": "2018-09-05T14:33:29.892-04:00"
                }
              }
            },
            "index": {
              "path": "index",
              "modified": "2018-09-05T14:33:29.788-04:00"
            }
          }
        },
        "contact": {
          "path": "contact",
          "modified": "2018-09-05T14:33:29.511-04:00",
          "folders": {
            "contact-thankyou": {
              "path": "contact-thankyou",
              "modified": "2018-09-05T14:33:29.565-04:00"
            }
          }
        },
        "downloads": {
          "path": "downloads",
          "modified": "2018-09-05T14:33:29.376-04:00",
          "folders": {
            "downloads-thank-you": {
              "path": "downloads-thank-you",
              "modified": "2018-09-05T14:33:29.402-04:00"
            },
            "downloads-thank-you-abc": {
              "path": "downloads-thank-you-abc",
              "modified": "2018-09-05T14:33:29.427-04:00"
            }
          }
        }
      }
    }
  }
}

根据您的需要，您可能需要用数组替换对象folders。

请注意，您的输入有两个版本的修改日期:Lastmodifed 和modifed - 两者都存在拼写错误。我假设你的数据是这样的:

function toTree(files) {
    const root = {};
    // Create structure where folder name is also a key in parent object
    for (const {Path, Lastmodifed, modifed} of files) {
        Path.match(/[^\/]+/g).reduce((acc, folder) => {
            if (!acc.folders) acc.folders = {};
            return acc.folders[folder] || (acc.folders[folder] = { path: folder, modified: null }); 
        }, root).modified = Lastmodifed || modifed;
    }
    // Optional: replace folders object by folders array, recursively
    (function recurse(node) {
        if (!node.folders) return;
        node.folders = Object.values(node.folders);
        node.folders.forEach(recurse);
    })(root);
    return root;
}

const files = [{"modifed": "2018-09-05T14:33:29.816-04:00","Path": "/index/library/abc"},{"modifed": "2018-09-05T14:33:29.867-04:00","Path": "/index/library/abc_form/abc_thankyou"},{"modifed": "2018-09-05T14:33:29.892-04:00","Path": "/index/library/abc_form/abc_thankyou_d"},{"modifed": "2018-09-05T14:33:29.841-04:00","Path": "/index/library/abc_form"},{"modifed": "2018-09-05T14:33:29.788-04:00","Path": "/index/library/index"},{"modifed": "2018-09-05T14:33:29.763-04:00","Path": "/index/library"},{"modifed": "2018-09-05T14:33:29.565-04:00","Path": "/index/contact/contact-thankyou"},{"modifed": "2018-09-05T14:33:29.511-04:00","Path": "/index/contact"},{"Lastmodifed": "2018-09-05T14:33:29.402-04:00","Path": "/index/downloads/downloads-thank-you"},{"Lastmodifed": "2018-09-05T14:33:29.427-04:00","Path": "/index/downloads/downloads-thank-you-abc"},{"Lastmodifed": "2018-09-05T14:33:29.376-04:00","Path": "/index/downloads"},{"Lastmodifed": "2018-09-05T14:33:25.520-04:00","Path": "/index"}];
console.log(toTree(files));