关于在javascript中使用数组进行web编程的问题_Javascript_Html

关于在javascript中使用数组进行web编程的问题

javascript html

关于在javascript中使用数组进行web编程的问题,javascript,html,Javascript,Html,我必须使用javascript中的目录数组为web显示目录。但我不知道如何在这种情况下设置条件 const directory = [ { type: 'file', name: 'file1.txt' }, { type: 'file', name: 'file2.txt' }, { type: 'directory', name: 'HTML Files', files: [ { type: 'file', name: 'file1.html'

我必须使用javascript中的目录数组为web显示目录。但我不知道如何在这种情况下设置条件

const directory = [
  { type: 'file', name: 'file1.txt' },
  { type: 'file', name: 'file2.txt' },
  {
    type: 'directory',
    name: 'HTML Files',
    files: [
      { type: 'file', name: 'file1.html' },
      { type: 'file', name: 'file2.html' }
    ]
  },
  { type: 'file', name: 'file3.txt' },
  {
    type: 'directory',
    name: 'JavaScript Files',
    files: [
      { type: 'file', name: 'file1.js' },
      { type: 'file', name: 'file2.js' },
      { type: 'file', name: 'file3.js' }
    ]
  }
];

我正在写的部分，但我不知道如何检查条件，因为所有类型都是文件：

  var File = '\0';
    if ()
    directory.forEach(eachFile => {
      
      File = File + `<li>${eachFile}</li>`;
    });

var文件='\0'；
如果（）
directory.forEach（每个文件=>{
File=File+`${eachFile}`；
});

这是我的HTML文件

 <div id="directories">
          <header>
            <title>File Directories</title>
          </header>
          <body>
            <h2>Directories</h2>
            <ul id = "displayDirectories"></ul>
          </body>
        </div>


文件目录
名录

这就是输出的方式：

要映射目录，可以使用递归和条件来检查目录/文件的类型。我使用map函数迭代所有数组元素，然后在列表中返回正确的html。您可以看到下面的示例

const directory = [{
    type: 'file',
    name: 'file1.txt'
  },
  {
    type: 'file',
    name: 'file2.txt'
  },
  {
    type: 'directory',
    name: 'HTML Files',
    files: [{
        type: 'file',
        name: 'file1.html'
      },
      {
        type: 'file',
        name: 'file2.html'
      }
    ]
  },
  {
    type: 'file',
    name: 'file3.txt'
  },
  {
    type: 'directory',
    name: 'JavaScript Files',
    files: [{
        type: 'file',
        name: 'file1.js'
      },
      {
        type: 'file',
        name: 'file2.js'
      },
      {
        type: 'file',
        name: 'file3.js'
      }
    ]
  }
];

const renderDir = (directory) => {
  return directory.map(dir => {
    if (dir.type === 'file') {
      return `<li>${dir.name}</li>`
    }
    return `<li>${dir.name}<ul>${renderDir(dir.files)}</ul></li>`
  }).join('')

}

const output = renderDir(directory);

document.getElementById('output').innerHTML = output;

const目录=[{
键入：“文件”，
名称：“file1.txt”
},
{
键入：“文件”，
名称：“file2.txt”
},
{
键入：“目录”，
名称：“HTML文件”，
档案：[{
键入：“文件”，
名称：“file1.html”
},
{
键入：“文件”，
名称：“file2.html”
}
]
},
{
键入：“文件”，
名称：“file3.txt”
},
{
键入：“目录”，
名称：“JavaScript文件”，
档案：[{
键入：“文件”，
名称：“file1.js”
},
{
键入：“文件”，
名称：“file2.js”
},
{
键入：“文件”，
名称：“file3.js”
}
]
}
];
const renderDir=（目录）=>{
返回directory.map（dir=>{
如果（dir.type==='file'）{
返回`${dir.name}`
}
返回`${dir.name}${renderDir（dir.files）}`
}).加入（“”）
}
const output=renderDir（目录）；
document.getElementById（'output'）。innerHTML=output；

由于结构有多个级别，因此必须递归完成，为此需要一个函数（每个级别递归调用自己）。该函数很简单，它采用

文件

数组，并为该文件数组生成html代码（包括

和
），为每个项目创建一个包含该项目名称的li
元素，如果该项也是一个目录，它将使用该目录文件数组调用自身，以生成其文件的html并将其插入li
：
function listEntries(files) {                                              // takes an array of files and generate an html string of the ul element
  let html = "<ul>";                                                       // opening the ul element

  files.forEach(entry => {                                                 // for each entry in the array
    if(entry.type == "file") {                                             // if the entry is a file
      html += "<li>" + entry.name + "</li>";                               // simply add an li element containing the name
    } else {                                                               // otherwise, if it's a directory
      html += "<li>" + entry.name + listEntries(entry.files) + "</li>";    // add an li element containing the name and an ul element of its children, created via calling listEntries on the files array
    }
  });

  return html + "</ul>";                                                   // close the ul and return
}

注意：由于html中包含ul
标记，因此应该接收生成的html的DOM元素不应该是另一个ul
元素，一个div
就可以了，如下所示：
<div id="displayDirectories"></div>



演示：

函数列表项（文件）{
返回文件。减少（（html，条目）=>
html+“”+entry.name+（entry.type==“目录”？列表项（entry.files）：“+””
，“”+“”；
}
const directory=[{type:'file'，name:'file1.txt'}，{type:'file'，name:'file2.txt'}，{type:'directory'，name:'HTML Files'，Files:[{type:'file'，name:'file1.HTML'}，{type:'file'，name:'file3.txt'}，{type:'directory'，name:'JavaScript Files'，Files:[{type:'file'，name:'file1.js'}，{type:'file'，name:'file2.js'}，{type:'file'，name:'file3.js'}]}；
document.getElementById（“displayDirectories”）.innerHTML=listEntries（目录）；

const目录=[
{type:'file'，name:'file1.txt'}，
{type:'file'，name:'file2.txt'}，
{
键入：“目录”，
名称：“HTML文件”，
档案：[
{type:'file'，name:'file1.html'}，
{类型：'file'，名称：'file2.html'}
]
},
{键入：'file'，名称：'file3.txt'}，
{
键入：“目录”，
名称：“JavaScript文件”，
档案：[
{type:'file'，name:'file1.js'}，
{type:'file'，name:'file2.js'}，
{类型：'file'，名称：'file3.js'}
]
}
];
var文件='\0'；
directory.forEach（每个文件=>{
if（每个文件['type']==“目录”）{
File=File+“”+eachFile['name']；
File=File+“”；
每个文件['files'].forEach（文件=>{
File=File+“”+File['name']+“”；
}); 
File=File+“”；
}否则{
File=File+“”+每个文件['name']+“”；
}
});
var ul=document.getElementById（'displayDirectories'）。innerHTML=File；

文件目录
名录

您有类型
属性，其中一些属性是“目录”。注意，您将
嵌套为
的子级，这是无效的，需要移动关闭
应该能够只移动关闭目录否？
<div id="displayDirectories"></div>