需要使用嵌套对象和数组创建新对象

Question

我想使用该对象在 UI 上创建一个文件夹结构

const structure = {
    "dummy_name": {
      "backend": {
        "app": {
          "__init__.py": "",
          "views.py": "",
          "models.py": "",
          "schemas.py": "",
          "extensions.py": ""
        },
        "services": {
          "risk_management.py": "",
          "notification.py": "",
          "report_generation.py": "",
          "authentication.py": ""
        },
        "api_gateway": {
          "__init__.py": "",
          "gateway.py": ""
        },
        "migrations": {},
        "tests": {
          "__init__.py": "",
          "test_risk_management.py": "",
          "test_notification.py": "",
          "test_report_generation.py": "",
          "test_authentication.py": ""
        },
        "config": {
          "__init__.py": "",
          "config.py": "",
          "development.py": "",
          "production.py": "",
          "testing.py": ""
        },
        "requirements": {
          "common.txt": "",
          "development.txt": "",
          "production.txt": ""
        },
        ".flaskenv": "",
        ".env": "",
        "Dockerfile": "",
        "docker-compose.yml": "",
        "run.py": "",
        ".gitignore": ""
      },
      "frontend": {
        "web": {
          "public": {
            "index.html": "",
            "favicon.ico": "",
            "manifest.json": ""
          },
          "src": {
            "components": {
              "Dashboard.js": "",
              "RiskEntryForm.js": "",
              "RiskVisualization.js": "",
              "UserManagement.js": ""
            },
            "App.js": "",
            "index.js": "",
            "serviceWorker.js": "",
            "setupTests.js": ""
          },
          "package.json": "",
          "Dockerfile": "",
          "docker-compose.yml": "",
          ".gitignore": ""
        },
        "mobile": {
          "ios": {
            "EWSApp": {
              "ContentView.swift": "",
              "EWSAppApp.swift": ""
            },
            "EWSApp.xcodeproj": {},
            "Podfile": "",
            ".gitignore": ""
          },
          "android": {
            "app": {
              "src": {
                "main": {
                  "java": {
                    "com": {
                      "ewsapp": {
                        "MainActivity.kt": "",
                        "DashboardFragment.kt": "",
                        "NotificationFragment.kt": ""
                      }
                    }
                  },
                  "res": {}
                }
              },
              "build.gradle": "",
              "settings.gradle": "",
              "gradlew": "",
              "gradlew.bat": "",
              ".gitignore": ""
            }
          }
        }
      },
      "database": {
        "schemas": {
          "risk_data.sql": "",
          "user_data.sql": "",
          "audit_logs.sql": "",
          "reporting_data_warehouse.sql": ""
        },
        "Dockerfile": "",
        "docker-compose.yml": ""
      },
      "documentation": {
        "README.md": "",
        "CONTRIBUTING.md": "",
        "CODE_OF_CONDUCT.md": "",
        "EWS_COMPONENT_ANALYSIS.md": ""
      },
      "scripts": {
        "deploy.sh": "",
        "setup.sh": "",
        "test.sh": ""
      },
      ".gitignore": ""
    }
  }

然后将路径添加到该数组中的每个对象键中

const filePath = [
    "../cache/dummy-id/dummy-project/dummy_name/backend/app/__init__.py",
    "../cache/dummy-id/dummy-project/dummy_name/backend/app/views.py",
    "../cache/dummy-id/dummy-project/dummy_name/backend/app/models.py",
    "../cache/dummy-id/dummy-project/dummy_name/backend/app/schemas.py",
    "../cache/dummy-id/dummy-project/dummy_name/backend/app/extensions.py",
    "../cache/dummy-id/dummy-project/dummy_name/backend/services/risk_management.py",
    "../cache/dummy-id/dummy-project/dummy_name/backend/services/notification.py",
    "../cache/dummy-id/dummy-project/dummy_name/backend/services/report_generation.py",
    "../cache/dummy-id/dummy-project/dummy_name/backend/services/authentication.py",
    "../cache/dummy-id/dummy-project/dummy_name/backend/api_gateway/__init__.py",
    "../cache/dummy-id/dummy-project/dummy_name/backend/api_gateway/gateway.py",
    "../cache/dummy-id/dummy-project/dummy_name/backend/migrations",
    "../cache/dummy-id/dummy-project/dummy_name/backend/tests/__init__.py",
    "../cache/dummy-id/dummy-project/dummy_name/backend/tests/test_risk_management.py",
    "../cache/dummy-id/dummy-project/dummy_name/backend/tests/test_notification.py",
    "../cache/dummy-id/dummy-project/dummy_name/backend/tests/test_report_generation.py",
    "../cache/dummy-id/dummy-project/dummy_name/backend/tests/test_authentication.py",
    "../cache/dummy-id/dummy-project/dummy_name/backend/config/__init__.py",
    "../cache/dummy-id/dummy-project/dummy_name/backend/config/config.py",
    "../cache/dummy-id/dummy-project/dummy_name/backend/config/development.py",
    "../cache/dummy-id/dummy-project/dummy_name/backend/config/production.py",
    "../cache/dummy-id/dummy-project/dummy_name/backend/config/testing.py",
    "../cache/dummy-id/dummy-project/dummy_name/backend/requirements/common.txt",
    "../cache/dummy-id/dummy-project/dummy_name/backend/requirements/development.txt",
    "../cache/dummy-id/dummy-project/dummy_name/backend/requirements/production.txt",
    "../cache/dummy-id/dummy-project/dummy_name/backend/.flaskenv",
    "../cache/dummy-id/dummy-project/dummy_name/backend/.env",
    "../cache/dummy-id/dummy-project/dummy_name/backend/Dockerfile",
    "../cache/dummy-id/dummy-project/dummy_name/backend/docker-compose.yml",
    "../cache/dummy-id/dummy-project/dummy_name/backend/run.py",
    "../cache/dummy-id/dummy-project/dummy_name/backend/.gitignore",
    "../cache/dummy-id/dummy-project/dummy_name/frontend/web/public/index.html",
    "../cache/dummy-id/dummy-project/dummy_name/frontend/web/public/favicon.ico",
    "../cache/dummy-id/dummy-project/dummy_name/frontend/web/public/manifest.json",
    "../cache/dummy-id/dummy-project/dummy_name/frontend/web/src/components/Dashboard.js",
    "../cache/dummy-id/dummy-project/dummy_name/frontend/web/src/components/RiskEntryForm.js",
    "../cache/dummy-id/dummy-project/dummy_name/frontend/web/src/components/RiskVisualization.js",
    "../cache/dummy-id/dummy-project/dummy_name/frontend/web/src/components/UserManagement.js",
    "../cache/dummy-id/dummy-project/dummy_name/frontend/web/src/App.js",
    "../cache/dummy-id/dummy-project/dummy_name/frontend/web/src/index.js",
    "../cache/dummy-id/dummy-project/dummy_name/frontend/web/src/serviceWorker.js",
    "../cache/dummy-id/dummy-project/dummy_name/frontend/web/src/setupTests.js",
    "../cache/dummy-id/dummy-project/dummy_name/frontend/web/package.json",
    "../cache/dummy-id/dummy-project/dummy_name/frontend/web/Dockerfile",
    "../cache/dummy-id/dummy-project/dummy_name/frontend/web/docker-compose.yml",
    "../cache/dummy-id/dummy-project/dummy_name/frontend/web/.gitignore",
    "../cache/dummy-id/dummy-project/dummy_name/frontend/mobile/ios/EWSApp/ContentView.swift",
    "../cache/dummy-id/dummy-project/dummy_name/frontend/mobile/ios/EWSApp/EWSAppApp.swift",
    "../cache/dummy-id/dummy-project/dummy_name/frontend/mobile/ios/EWSApp.xcodeproj",
    "../cache/dummy-id/dummy-project/dummy_name/frontend/mobile/ios/Podfile",
    "../cache/dummy-id/dummy-project/dummy_name/frontend/mobile/ios/.gitignore",
    "../cache/dummy-id/dummy-project/dummy_name/frontend/mobile/android/app/src/main/java/com/ewsapp/MainActivity.kt",
    "../cache/dummy-id/dummy-project/dummy_name/frontend/mobile/android/app/src/main/java/com/ewsapp/DashboardFragment.kt",
    "../cache/dummy-id/dummy-project/dummy_name/frontend/mobile/android/app/src/main/java/com/ewsapp/NotificationFragment.kt",
    "../cache/dummy-id/dummy-project/dummy_name/frontend/mobile/android/app/src/main/res",
    "../cache/dummy-id/dummy-project/dummy_name/frontend/mobile/android/app/build.gradle",
    "../cache/dummy-id/dummy-project/dummy_name/frontend/mobile/android/app/settings.gradle",
    "../cache/dummy-id/dummy-project/dummy_name/frontend/mobile/android/app/gradlew",
    "../cache/dummy-id/dummy-project/dummy_name/frontend/mobile/android/app/gradlew.bat",
    "../cache/dummy-id/dummy-project/dummy_name/frontend/mobile/android/app/.gitignore",
    "../cache/dummy-id/dummy-project/dummy_name/database/schemas/risk_data.sql",
    "../cache/dummy-id/dummy-project/dummy_name/database/schemas/user_data.sql",
    "../cache/dummy-id/dummy-project/dummy_name/database/schemas/audit_logs.sql",
    "../cache/dummy-id/dummy-project/dummy_name/database/schemas/reporting_data_warehouse.sql",
    "../cache/dummy-id/dummy-project/dummy_name/database/Dockerfile",
    "../cache/dummy-id/dummy-project/dummy_name/database/docker-compose.yml",
    "../cache/dummy-id/dummy-project/dummy_name/documentation/README.md",
    "../cache/dummy-id/dummy-project/dummy_name/documentation/CONTRIBUTING.md",
    "../cache/dummy-id/dummy-project/dummy_name/documentation/CODE_OF_CONDUCT.md",
    "../cache/dummy-id/dummy-project/dummy_name/documentation/EWS_COMPONENT_ANALYSIS.md",
    "../cache/dummy-id/dummy-project/dummy_name/scripts/deploy.sh",
    "../cache/dummy-id/dummy-project/dummy_name/scripts/setup.sh",
    "../cache/dummy-id/dummy-project/dummy_name/scripts/test.sh",
    "../cache/dummy-id/dummy-project/dummy_name/.gitignore"
  ]

有人可以写一段 JavaScript 代码来解释如何做到这一点吗？

UI生成的代码是

const toggleFolder = (event, folderKey) => {
        console.log("folderKey: ", folderKey)
        event.stopPropagation()
        setExpandedFolders(prevState => ({
            ...prevState,
            [folderKey]: !prevState[folderKey]
        }));
    };

    const renderFileTree = (structure) => {
        return (
            <ul className="directory-item">
                {Object.keys(structure).map(key => (
                    <li key={key} onClick={(e) => toggleFolder(e,key)}>
                        {renderIcon(data[key])}
                        {key}
                        {expandedFolders[key] && renderFileTree(data[key])}
                    </li>
                ))}
            </ul>
        );
    };

    const renderIcon = (item) => {
        if (typeof item === 'object' && Object.keys(item).length > 0) {
            return <i className="fas fa-folder-open folder"></i>;
        } else {
            return <i className="fas fa-file file"></i>;
        }
    };

我想创建一个新对象，其中看起来像

const newStructure = {
    "dummy_name": {
      "backend": {
        "app": {
          "__init__.py": "../cache/dummy-id/dummy-project/dummy_name/backend/app/__init__.py",
          "views.py": "../cache/dummy-id/dummy-project/dummy_name/backend/app/views.py",
          "models.py": "../cache/dummy-id/dummy-project/dummy_name/backend/app/models.py",
          "schemas.py": "../cache/dummy-id/dummy-project/dummy_name/backend/app/schemas.py",
          "extensions.py": "../cache/dummy-id/dummy-project/dummy_name/backend/app/extensions.py"
        },
       }
      }
     }

通过使用上面两个变量“Structure”和“filePath”

Answer 1

您可以将文件路径拆分为文件夹和最终文件名，然后跳过

structure

对象根级别中不存在的第一个文件夹。然后可以使用其他文件夹深入了解对象结构以到达文件属性，您可以在其中填写完整路径。

这是一个实现：

function createStructure(structure, filePath) {
    const newStructure = JSON.parse(JSON.stringify(structure)); // clone
    for (const path of filePath) {
        const folders = path.split("/");
        const file = folders.pop();
        // Skip the folders that are not in the structure
        while (folders[0] && !(folders[0] in newStructure)) {
            folders.shift();
        }
        // Drill down inside the structure
        let node = newStructure;
        for (const folder of folders) {
            node = node?.[folder];
        }
        // If the file is found in the structure, update it:
        if (file in node) {
            node[file] = path;
        }
    }
    return newStructure;
}
// Example run with your data:
const structure = {"dummy_name": {"backend": {"app": {"__init__.py": "","views.py": "","models.py": "","schemas.py": "","extensions.py": ""},"services": {"risk_management.py": "","notification.py": "","report_generation.py": "","authentication.py": ""},"api_gateway": {"__init__.py": "","gateway.py": ""},"migrations": {},"tests": {"__init__.py": "","test_risk_management.py": "","test_notification.py": "","test_report_generation.py": "","test_authentication.py": ""},"config": {"__init__.py": "","config.py": "","development.py": "","production.py": "","testing.py": ""},"requirements": {"common.txt": "","development.txt": "","production.txt": ""},".flaskenv": "",".env": "","Dockerfile": "","docker-compose.yml": "","run.py": "",".gitignore": ""},"frontend": {"web": {"public": {"index.html": "","favicon.ico": "","manifest.json": ""},"src": {"components": {"Dashboard.js": "","RiskEntryForm.js": "","RiskVisualization.js": "","UserManagement.js": ""},"App.js": "","index.js": "","serviceWorker.js": "","setupTests.js": ""},"package.json": "","Dockerfile": "","docker-compose.yml": "",".gitignore": ""},"mobile": {"ios": {"EWSApp": {"ContentView.swift": "","EWSAppApp.swift": ""},"EWSApp.xcodeproj": {},"Podfile": "",".gitignore": ""},"android": {"app": {"src": {"main": {"java": {"com": {"ewsapp": {"MainActivity.kt": "","DashboardFragment.kt": "","NotificationFragment.kt": ""}}},"res": {}}},"build.gradle": "","settings.gradle": "","gradlew": "","gradlew.bat": "",".gitignore": ""}}}},"database": {"schemas": {"risk_data.sql": "","user_data.sql": "","audit_logs.sql": "","reporting_data_warehouse.sql": ""},"Dockerfile": "","docker-compose.yml": ""},"documentation": {"README.md": "","CONTRIBUTING.md": "","CODE_OF_CONDUCT.md": "","EWS_COMPONENT_ANALYSIS.md": ""},"scripts": {"deploy.sh": "","setup.sh": "","test.sh": ""},".gitignore": ""}};
const filePath = ["../cache/dummy-id/dummy-project/dummy_name/backend/app/__init__.py","../cache/dummy-id/dummy-project/dummy_name/backend/app/views.py","../cache/dummy-id/dummy-project/dummy_name/backend/app/models.py","../cache/dummy-id/dummy-project/dummy_name/backend/app/schemas.py","../cache/dummy-id/dummy-project/dummy_name/backend/app/extensions.py","../cache/dummy-id/dummy-project/dummy_name/backend/services/risk_management.py","../cache/dummy-id/dummy-project/dummy_name/backend/services/notification.py","../cache/dummy-id/dummy-project/dummy_name/backend/services/report_generation.py","../cache/dummy-id/dummy-project/dummy_name/backend/services/authentication.py","../cache/dummy-id/dummy-project/dummy_name/backend/api_gateway/__init__.py","../cache/dummy-id/dummy-project/dummy_name/backend/api_gateway/gateway.py","../cache/dummy-id/dummy-project/dummy_name/backend/migrations","../cache/dummy-id/dummy-project/dummy_name/backend/tests/__init__.py","../cache/dummy-id/dummy-project/dummy_name/backend/tests/test_risk_management.py","../cache/dummy-id/dummy-project/dummy_name/backend/tests/test_notification.py","../cache/dummy-id/dummy-project/dummy_name/backend/tests/test_report_generation.py","../cache/dummy-id/dummy-project/dummy_name/backend/tests/test_authentication.py","../cache/dummy-id/dummy-project/dummy_name/backend/config/__init__.py","../cache/dummy-id/dummy-project/dummy_name/backend/config/config.py","../cache/dummy-id/dummy-project/dummy_name/backend/config/development.py","../cache/dummy-id/dummy-project/dummy_name/backend/config/production.py","../cache/dummy-id/dummy-project/dummy_name/backend/config/testing.py","../cache/dummy-id/dummy-project/dummy_name/backend/requirements/common.txt","../cache/dummy-id/dummy-project/dummy_name/backend/requirements/development.txt","../cache/dummy-id/dummy-project/dummy_name/backend/requirements/production.txt","../cache/dummy-id/dummy-project/dummy_name/backend/.flaskenv","../cache/dummy-id/dummy-project/dummy_name/backend/.env","../cache/dummy-id/dummy-project/dummy_name/backend/Dockerfile","../cache/dummy-id/dummy-project/dummy_name/backend/docker-compose.yml","../cache/dummy-id/dummy-project/dummy_name/backend/run.py","../cache/dummy-id/dummy-project/dummy_name/backend/.gitignore","../cache/dummy-id/dummy-project/dummy_name/frontend/web/public/index.html","../cache/dummy-id/dummy-project/dummy_name/frontend/web/public/favicon.ico","../cache/dummy-id/dummy-project/dummy_name/frontend/web/public/manifest.json","../cache/dummy-id/dummy-project/dummy_name/frontend/web/src/components/Dashboard.js","../cache/dummy-id/dummy-project/dummy_name/frontend/web/src/components/RiskEntryForm.js","../cache/dummy-id/dummy-project/dummy_name/frontend/web/src/components/RiskVisualization.js","../cache/dummy-id/dummy-project/dummy_name/frontend/web/src/components/UserManagement.js","../cache/dummy-id/dummy-project/dummy_name/frontend/web/src/App.js","../cache/dummy-id/dummy-project/dummy_name/frontend/web/src/index.js","../cache/dummy-id/dummy-project/dummy_name/frontend/web/src/serviceWorker.js","../cache/dummy-id/dummy-project/dummy_name/frontend/web/src/setupTests.js","../cache/dummy-id/dummy-project/dummy_name/frontend/web/package.json","../cache/dummy-id/dummy-project/dummy_name/frontend/web/Dockerfile","../cache/dummy-id/dummy-project/dummy_name/frontend/web/docker-compose.yml","../cache/dummy-id/dummy-project/dummy_name/frontend/web/.gitignore","../cache/dummy-id/dummy-project/dummy_name/frontend/mobile/ios/EWSApp/ContentView.swift","../cache/dummy-id/dummy-project/dummy_name/frontend/mobile/ios/EWSApp/EWSAppApp.swift","../cache/dummy-id/dummy-project/dummy_name/frontend/mobile/ios/EWSApp.xcodeproj","../cache/dummy-id/dummy-project/dummy_name/frontend/mobile/ios/Podfile","../cache/dummy-id/dummy-project/dummy_name/frontend/mobile/ios/.gitignore","../cache/dummy-id/dummy-project/dummy_name/frontend/mobile/android/app/src/main/java/com/ewsapp/MainActivity.kt","../cache/dummy-id/dummy-project/dummy_name/frontend/mobile/android/app/src/main/java/com/ewsapp/DashboardFragment.kt","../cache/dummy-id/dummy-project/dummy_name/frontend/mobile/android/app/src/main/java/com/ewsapp/NotificationFragment.kt","../cache/dummy-id/dummy-project/dummy_name/frontend/mobile/android/app/src/main/res","../cache/dummy-id/dummy-project/dummy_name/frontend/mobile/android/app/build.gradle","../cache/dummy-id/dummy-project/dummy_name/frontend/mobile/android/app/settings.gradle","../cache/dummy-id/dummy-project/dummy_name/frontend/mobile/android/app/gradlew","../cache/dummy-id/dummy-project/dummy_name/frontend/mobile/android/app/gradlew.bat","../cache/dummy-id/dummy-project/dummy_name/frontend/mobile/android/app/.gitignore","../cache/dummy-id/dummy-project/dummy_name/database/schemas/risk_data.sql","../cache/dummy-id/dummy-project/dummy_name/database/schemas/user_data.sql","../cache/dummy-id/dummy-project/dummy_name/database/schemas/audit_logs.sql","../cache/dummy-id/dummy-project/dummy_name/database/schemas/reporting_data_warehouse.sql","../cache/dummy-id/dummy-project/dummy_name/database/Dockerfile","../cache/dummy-id/dummy-project/dummy_name/database/docker-compose.yml","../cache/dummy-id/dummy-project/dummy_name/documentation/README.md","../cache/dummy-id/dummy-project/dummy_name/documentation/CONTRIBUTING.md","../cache/dummy-id/dummy-project/dummy_name/documentation/CODE_OF_CONDUCT.md","../cache/dummy-id/dummy-project/dummy_name/documentation/EWS_COMPONENT_ANALYSIS.md","../cache/dummy-id/dummy-project/dummy_name/scripts/deploy.sh","../cache/dummy-id/dummy-project/dummy_name/scripts/setup.sh","../cache/dummy-id/dummy-project/dummy_name/scripts/test.sh","../cache/dummy-id/dummy-project/dummy_name/.gitignore"];
const newStructure = createStructure(structure, filePath);
console.log(newStructure);