一般資訊
使用具有協作操作轉換的在線語法熒光筆。這個想法是單個專案在左側有一個檔案樹（純 html / css），在右側有一個編輯器。用戶可以根據需要創建新檔案/目錄，并且顯然可以嵌套它們。
問題
服務器將檔案和目錄作為物件回傳：
{
"files": ["index.html","panel.html"]
"directory1": {
"files": ["foo.html"]
"subdir1": {
"files": ["somefile.txt"]
}
"subdir2": {
"files": ["somefile.php","other.php"]
}
}
"directory2": {
"subdir1": {
"files": ["you_get_the_idea.txt"]
}
}
}
物件是正確的。其中的每個物件都包含一個陣列，其中包含該目錄的檔案和一個表示嵌套目錄的嵌套物件。
問題是我想在頂部按字母順序列出目錄，并按字母順序列出其中的檔案，就像默認情況下任何檔案瀏覽器一樣。出于某種原因，我無法正確完成它。
我自己嘗試過的
// Containing the object above
const fileData = {};
let iterations = 0;
const iterate = (fileData) => {
Object.keys(fileData).forEach(key => {
// It's a directory
if (typeof fileData[key] === 'object' && fileData[key] !== null && key != 'files') {
html = '<li><input type="checkbox"/><span>' key '</span><ul>';
iterations ;
iterate(fileData[key]);
last = false;
}
// It's a file
else
{
for(let i = 0; i < fileData[key].length; i )
{
html = '<li><span>' fileData[key][i] '</span></li>';
}
for(let i = 0; i < iterations; i )
{
html = '</ul></li>';
}
iterations--;
}
});
}
在上面的示例中，這將導致：
- index.html
- panel.html
- directory1
-- foo.html
-- subdir1
--- somefile.txt
--- subdir2
---- somefile.php
---- other.php
---- directory2
----- subdir1
------ you_get_the_idea.txt
在此處運行示例：https ://jsfiddle.net/jbvhyzu6/ （沒有放在這里，因為 CSS 代碼太長了）。
雖然它應該導致：
- directory1
-- foo.html
-- subdir1
--- somefile.txt
-- subdir2
--- somefile.php
--- other.php
-- subdir2
--- subdir1
---- you_get_the_idea.txt
- index.html
- panel.html
所以我的問題是：我該如何解決這個問題？
uj5u.com熱心網友回復：
在處理其余部分之前，您需要處理嵌套部分。
const
fileData = { files: ["index.html", "panel.html"], directory1: { files: ["foo.html"], subdir1: { files: ["somefile.txt"] }, subdir2: { files: ["somefile.php", "other.php"] } }, directory2: { subdir1: { files: ["you_get_the_idea.txt"] } } },
iterate = data => Object
.entries(data)
.reduce((r, [k, v]) => r (
k === 'files'
? v.map(s => `<li><span>${s}</span></li>`).join('')
: `<li><input type="checkbox"/><span>${k}${iterate(v)}</li>`
), '<ul>'
) '</ul>';
document.body.innerHTML = iterate(fileData);轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/493509.html
標籤：javascript 目的 迭代
上一篇：為什么我的環境變數顯示為未定義？