How to create lists within lists in JavaScript using Pure DOM and Vanilla JavaScript?

Question

I am trying to create multiple lists within another list using pure DOM and vanilla JavaScript using an array of objects that I have been provided.

Array of Objects

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

Any help would be greatly appreciated. Thanks! :)

Please take the tour and learn how to ask a good question. Stackoverflow works best when you ask about a specific problem. It isn't a good place for questions asking for vague help writing a complete application, even if it is a small one. — Quentin
– Quentin, Commented Mar 14, 2019 at 15:35
Hello new contributor! I honestly hate to down-vote new contributor questions, but your question is completely unclear. Can you clarify as to what the inputs are and what the output you are seeking is, as well as give us more information on what problem in javascript / with the DOM you are having? If you can do this, I will happily remove my downvote, okay? — ControlAltDel
– ControlAltDel, Commented Mar 14, 2019 at 15:35
I think you have the object well, you want an other thing or what's wrong? — Jordi Castillo
– Jordi Castillo, Commented Mar 14, 2019 at 15:38
My guess is that it appears the OP wants to use the provided array to produce DOM UL->LI nested structures as they appear in the image. But an attempt is required for usre. — Randy Casburn
– Randy Casburn, Commented Mar 14, 2019 at 15:39
So i have been given a bunch of object instances in the array of objects. Some object instances need to be prints as lists under another list. For Example, as seen by the picture, the 'files.name' instance is presented as a list under the name instance. I have tried creating the list many times but it only prints a single list. MY TRY: var dr = document.getElementById('dir'); for(var a=0; a < directory.length; a++) { dr.innerHTML += '<li>' + directory[a].name + '</li>'; } } — john sal
– john sal, Commented Mar 14, 2019 at 15:40

prasanth · Accepted Answer · 2019-03-14 16:03:30Z

0

Use recursive function and dom element creater createElement() function

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);

li ul{
 list-style-type:circle;
}

edited Mar 14, 2019 at 16:03

answered Mar 14, 2019 at 15:53

prasanth

22.6k4 gold badges33 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

john sal Over a year ago

whats the point of str = ' '; Like whats the points of it being an empty string? Thanks for ur answer!!

prasanth Over a year ago

yes .initially str declare as empty.becuse without empty its not match any condition .Its return undefined that why

brk · Accepted Answer · 2019-03-14 15:43:42Z

You can create a recursive function.

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>

Collectives™ on Stack Overflow

How to create lists within lists in JavaScript using Pure DOM and Vanilla JavaScript?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related