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

时间:2018-12-14 15:27:59

标签: javascript json

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

NOT EXISTS

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

return response.text().then(text => Promise.reject(text));

如果有人可以帮助我用javascipt编写逻辑,那将是很大的帮助。 预先谢谢你。

1 个答案:

答案 0 :(得分:1)

您可以使用以下代码。它首先创建一个嵌套结构,其中文件夹名称也是父对象中的键。甚至可以在源结构中遇到modified日期之前创建一个节点。 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替换为数组。

请注意,您输入的modified日期有两个版本:Lastmodifedmodifed -都存在拼写错误。我假设您的数据就是这样:

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));