Javascript-寻找转换父子关系的方法

我对转换亲子关系有意见。现在，我的数据结构如下所示

{
    "id": 7,
    "name": "Folder 1",
    "parent_folder": null,
    "folders": [
        {
            "id": 8,
            "name": "Folder 1-1",
            "parent_folder": 7
        },
        {
            "id": 10,
            "name": "Folder 1-2",
            "parent_folder": 7
        }
    ],
},
{
    "id": 8,
    "name": "Folder 1-1",
    "parent_folder": 7,
    "folders": [
        {
            "id": 9,
            "name": "Folder 1-1-1",
            "parent_folder": 8
        }
    ],
},
{
    "id": 9,
    "name": "Folder 1-1-1",
    "parent_folder": 8,
}

每个文件夹都有自己的表示形式，您可以在其中找到父文件夹id及其子文件夹（仅向下一级）

复杂性是指当我试图深入研究结构时。我可以创建如下结构：

Folder 1
    Folder 1-1
    Folder 1-2

但是当我尝试添加文件夹1-1-1时，我总是失败

我提出的解决方案你可以在下面找到。我从API端点获取此文件夹数据，并尝试仅处理该响应。代码段在检索响应后立即出现：

var tempFolderList = [];


var f = response.data.folders;

for (var folder in f) {
  if (f[folder].parent_folder) {
    console.log("PARENT TEMPLATE FOLDER FOUND");

    // Create temporary variable
    var tempChildFolder = {
      id: f[folder].id,
      name: f[folder].name,
      parent_folder: f[folder].parent_folder,
      children: [],
    };

    var attv = this.addToTree(tempFolderList, folder, tempChildFolder, f)
    console.log("attv: " + attv)

    if (attv) {
      this.tempFolderList = attv
    }
    else {
      tempFolderList.push(tempChildFolder)
    }

    // Check if id from current iteration is in temp Folder list
    // if yes add to the list, if not :TODO:
    // if (
    //   tempFolderList.find(
    //     (x) => x.id === f[folder].parent_folder
    //   )
    // ) {
    //   tempFolderList
    //     .find((x) => x.id === f[folder].parent_folder)
    //     .children.push(tempChildFolder);
    // }
  } else {
    // If folder do not have parent folder, just add to temp folder list
    var tempFolder = {
      id: f[folder].id,
      name: f[folder].name,
      parent_folder: f[folder].parent_folder,
      children: [],
    };
    tempFolderList.push(tempFolder);
  }
    console.log(tempFolderList);
}

下面是addToTree函数：

addToTree(tempFolderList, folder, tempChildFolder, folderList) {
  if (tempFolderList.find((x) => x.id === folderList[folder].parent_folder)) {
    // tempFolderList.find((x) => x.id === f[folder].parent_folder).children.push(tempChildFolder)
    tempFolderList.push(tempChildFolder)
    return tempFolderList;
  }
  else {
    for (var f in tempFolderList) {
      var attt = this.addToTree(tempFolderList[f].children, folder, tempChildFolder, folderList)
      if (attt) {
        tempFolderList[f] = attt
        return tempFolderList
      }
      else {
        return false
      }
    }
  }
    },

---

首先，使用文件夹映射的id创建文件夹映射，以便以后更快地访问：

let folders=response.data.folders
让folderMap=folders.reduce（（映射，文件夹）=>{
map[folder.id]=文件夹
返回图
}, {})

然后仅筛选根文件夹：

let folderTree=folders.filter（folder=>folder.parent_folder==null）

然后递归解析文件夹子项：

let resolveFolder=函数（文件夹）{
让newFolder={…folderMap[folder.id]}//在此处复制文件夹对象，因为下一行我们将对其进行变异
if（newFolder.folders）{
newFolder.folders=newFolder.folders.map（resolveFolder）
}
返回新文件夹
}
映射（resolveFolder）

let文件夹=[
{
“id”：7，
“名称”：“文件夹1”，
“父文件夹”：空，
“文件夹”：[
{
“id”：8，
“名称”：“文件夹1-1”，
“父文件夹”：7
},
{
“id”：10，
“名称”：“文件夹1-2”，
“父文件夹”：7
}
]
},
{
“id”：8，
“名称”：“文件夹1-1”，
“父文件夹”：7，
“文件夹”：[
{
“id”：9，
“名称”：“文件夹1-1-1”，
“父文件夹”：8
}
]
},
{
“id”：9，
“名称”：“文件夹1-1-1”，
“父文件夹”：8
},
{
“id”：10，
“名称”：“文件夹1-2”，
“父文件夹”：7
}
]
让folderMap=folders.reduce（（映射，文件夹）=>{
map[folder.id]=文件夹
返回图
}, {})
让resolveFolder=函数（文件夹）{
返回{
…文件夹映射[folder.id]，
文件夹：文件夹映射[folder.id]。文件夹？.map（resolveFolder）
}
}
让folderTree=文件夹
.filter（folder=>folder.parent_folder===null）
.map（解析文件夹）
console.log（folderTree）

Hey！谢谢你的回答，真的很有帮助。但我想知道，如果我收到一个文件夹列表，其中我只有关于ID、文件夹名称和父文件夹ID的信息，您是否能帮助我解决这个问题？我试图调整你的例子，但又一次失败了…`````{id:1，名称：“文件夹1”，父文件夹：null}，{id:2，名称：“文件夹1-2”，父文件夹：1}，等等```@法法尔，试试这个。