如何使用Pure DOM和Vanilla JavaScript在JavaScript的列表中创建列表？

Question

How My List Should Look

我正在尝试使用提供的对象数组使用纯DOM和原始JavaScript在另一个列表中创建多个列表。

对象数组

var 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' }
    ]
}
];

任何帮助将不胜感激。谢谢！ ：）

Answer 1

您可以创建一个递归函数。

var 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'
      }
    ]
  }
];
let list = '';

// recursive function 
function createList(array) {
  array.forEach(function(item) {
    if (item.type === 'file' && !item.files) {
      // template literals
      list += `<li>${item.name}</li>`
    } 
      // check if the files is an array then call the recursive function 
      else if (item.files && item.files.length > 0) {
      list += `<li>${item.name}</li>`
      createList(item.files)
    }
  })
  return list;
}
document.getElementById('liContainer').innerHTML = createList(directory);

<ul id='liContainer'></ul>

Answer 2

使用递归函数和dom元素创建器NextElementOnReturn函数

createElement()

var 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' } ] } ];


function creater(arr) {
  var str = '';
  var last="";
  arr.forEach(function(a, b) {
 
    var ul = document.createElement('UL')
    var li = document.createElement('LI')
    if (a.files) {
      if (a.name) {
        li.innerHTML = a.name;
        last =li;
      }
      last.append(ul)
      ul.innerHTML = creater(a.files);
      str += last.outerHTML;
    } else {
      li.innerHTML = a.name;
      last = li;
      str += li.outerHTML;
    }
  });
  return str
}

document.body.innerHTML = creater(directory);