I want to create a folder structure on UI using the object
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": ""
}
}
and then add path into each object key from this array
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"
]
Can someone write a javascript code to explain how can it be done.
The code for UI generation is
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>;
}
};
I want to create a new object in which will look like
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"
},
}
}
}You can split the file paths into its folders and final file name, and then skip the first folders which are not present in the root level of the structure object. The other folders can then be used to drill down the object structure to reach the file property, where you can fill in the full path.
Here is an implementation:
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 (node && 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);