Question

我有一个非常复杂的JSON数据，其中包含许多子节点。我正在尽力使其扁平化，以便解决目标。

我只需要获取所有嵌套的“子级”和子级子级，并将它们推入单个数组中。

请帮帮我，以下是我的示例数据，

{
  "path": "/root",
  "name": "Through_5cd5553eb7f004432205cb6b",
  "type": "folder",
  "children": [
    {
      "path": "/root/Through_5cd5553eb7f004432205cb6b/assets",
      "name": "assets",
      "type": "folder",
      "children": [
        {
          "path": "/root/Through_5cd5553eb7f004432205cb6b/assets/proxies.png",
          "name": "proxies.png",
          "type": "file"
        },
        {
          "path": "/root/Through_5cd5553eb7f004432205cb6b/assets/targets.png",
          "name": "targets.png",
          "type": "file"
        }
      ]
    },
    {
      "path": "/root/Through_5cd5553eb7f004432205cb6b/codgen-for-wsil-backend-esg",
      "name": "codgen-for-wsil-backend-esg",
      "type": "folder",
      "children": [
        {
          "path": "/root/Through_5cd5553eb7f004432205cb6b/codgen-for-wsil-backend-esg/assets",
          "name": "assets",
          "type": "folder",
          "children": [

          ]
        },
        {
          "path": "/root/Through_5cd5553eb7f004432205cb6b/codgen-for-wsil-backend-esg/index.md",
          "name": "index.md",
          "type": "file"
        }
      ]
    },
    {
      "path": "/root/Through_5cd5553eb7f004432205cb6b/index.md",
      "name": "index.md",
      "type": "file"
    },
    {
      "path": "/root/Through_5cd5553eb7f004432205cb6b/jwt-implementation-esg",
      "name": "jwt-implementation-esg",
      "type": "folder",
      "children": [
        {
          "path": "/root/Through_5cd5553eb7f004432205cb6b/jwt-implementation-esg/assets",
          "name": "assets",
          "type": "folder",
          "children": [

          ]
        },
        {
          "path": "/root/Through_5cd5553eb7f004432205cb6b/jwt-implementation-esg/index.md",
          "name": "index.md",
          "type": "file"
        }
      ]
    }
  ]
}

预期的输出将基于父级“名称”进行映射，

[
  {
    "path": "/root/Through_5cd5553eb7f004432205cb6b/assets/proxies.png",
    "name": "proxies.png",
    "type": "file"
  },
  {
    "path": "/root/Through_5cd5553eb7f004432205cb6b/assets/targets.png",
    "name": "targets.png",
    "type": "file"
  },
  {
    "path": "/root/Through_5cd5553eb7f004432205cb6b/codgen-for-wsil-backend-esg/assets",
    "name": "assets",
    "type": "folder",
    "children": [

    ]
  },
  {
    "path": "/root/Through_5cd5553eb7f004432205cb6b/codgen-for-wsil-backend-esg/index.md",
    "name": "index.md",
    "type": "file"
  },
  {
    "path": "/root/Through_5cd5553eb7f004432205cb6b/index.md",
    "name": "index.md",
    "type": "file"
  },
  {
    "path": "/root/Through_5cd5553eb7f004432205cb6b/jwt-implementation-esg/assets",
    "name": "assets",
    "type": "folder",
    "children": [

    ]
  },
  {
    "path": "/root/Through_5cd5553eb7f004432205cb6b/jwt-implementation-esg/index.md",
    "name": "index.md",
    "type": "file"
  }
]

Answer 1

您可以像这样递归调用children上的函数：

使用flatMap遍历数组，并展平在每个级别返回的数组。
Destructure每个对象获取children和rest的属性以分隔变量。
- 检查对象是否具有children。如果是，则用children: [] +递归返回transform的对象，即children
- 如果否，则仅返回数组[rest]中的对象

const input={path:"/root",name:"Through_5cd5553eb7f004432205cb6b",type:"folder",children:[{path:"/root/Through_5cd5553eb7f004432205cb6b/assets",name:"assets",type:"folder",children:[{path:"/root/Through_5cd5553eb7f004432205cb6b/assets/proxies.png",name:"proxies.png",type:"file"},{path:"/root/Through_5cd5553eb7f004432205cb6b/assets/targets.png",name:"targets.png",type:"file"}]},{path:"/root/Through_5cd5553eb7f004432205cb6b/codgen-for-wsil-backend-esg",name:"codgen-for-wsil-backend-esg",type:"folder",children:[{path:"/root/Through_5cd5553eb7f004432205cb6b/codgen-for-wsil-backend-esg/assets",name:"assets",type:"folder",children:[]},{path:"/root/Through_5cd5553eb7f004432205cb6b/codgen-for-wsil-backend-esg/index.md",name:"index.md",type:"file"}]},{path:"/root/Through_5cd5553eb7f004432205cb6b/index.md",name:"index.md",type:"file"},{path:"/root/Through_5cd5553eb7f004432205cb6b/jwt-implementation-esg",name:"jwt-implementation-esg",type:"folder",children:[{path:"/root/Through_5cd5553eb7f004432205cb6b/jwt-implementation-esg/assets",name:"assets",type:"folder",children:[]},{path:"/root/Through_5cd5553eb7f004432205cb6b/jwt-implementation-esg/index.md",name:"index.md",type:"file"}]}]};

function trasnform(array) {
  return array.flatMap(({ children, ...rest }) => {
    if(children)
      return [{ ...rest, children: [] }, ...trasnform(children)]
    else
      return [rest]
  })
}

console.log(trasnform(input.children))

Answer 2

您可以使用与此类似的函数来展平数据：

function flatten(data) {
  const { path, name, type, children = [] } = data;
  const result = []; // you can add the parent data in the result if you want
  let queue = [...children];

  while (queue.length > 0) {
    const { path, name, type, children = []} = queue.shift();
    result.push({ path, name, type });
    queue = [...queue, ...children];
  }
  
  return result;
}

获取所有子元素并将其推入数组

2 个答案: