Creating a UL from nested array

Question

I'm taking an intro JS course at my college and I have to build a <ul> with a nested array through JS. I've already built an <ol> with a regular array for the first part of the assignment. This is what I did:

window.onload = function(){

    fruits.sort();

    var ol = "<ol>"
    for(var i = 0; i < fruits.length; i++){
        ol+= "<li>" + fruits[i] + "</li>"
    }ol += "</ol>"

    var myContainer = document.querySelector("#olContainer").innerHTML = ol;
};

For this array:

var fruits = [ "Apples","Oranges","Pears","Grapes","Pineapples","Mangos" ];

and the current nested array I'm working with, is this:

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

I am thinking that using a switch statement would be better but I don't know how to iterate through each line of code and extracting the nested lists to indent them as a sublist. I am required to build upon my previous JS function for the <ol> list

If you already have the code working for <ol>, you can put it into a function which accepts an argument so you can change the ol to ul. It is also preferable to use createElement and appendChild as manipulating innerHTML is hard on the browser memory and garbage collector. — George
– George, Commented Mar 31, 2018 at 2:23
yea but that one was for a single, flat array. Its different for nested arrays. — mchd
– mchd, Commented Mar 31, 2018 at 2:24
OK, I see, you can loop the directory array with various ways, developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/… so you could possibly use a for ... of loop, or use an Array.forEach loop. you decide. Inside the loop you can access the object containing type, name, and possibly the files array. e.g. directory.forEach(item=>(console.log("name:", item.name))) — George
– George, Commented Mar 31, 2018 at 2:27

Mr Lister · Accepted Answer · 2018-04-02 16:52:14Z

Go recursive! It's basically a function that calls itself until certain condition, more details: https://www.sitepoint.com/recursion-functional-javascript/

Recursion is a technique for iterating over an operation by having a function call itself repeatedly until it arrives at a result. Most loops can be rewritten in a recursive style, and in some functional languages this approach to looping is the default.

you pass the directory to the function and loop through the first level values, if it's a file you add it to the list, otherwise you call the same function but you pass the second level list which is the value (the list of files), adding another nested ul, and so on ..

See the snippet below (based on your previous JS function for the <ol> list)

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 createUl(list){
	
    var myUl = "<ul>";

    for(var i = 0; i < list.length; i++){
      if(list[i].type == "file")
        myUl+= "<li>" + list[i].name + "</li>";
      else{ // it's a directory
        myUl+= "<li>" + list[i].name + "</li>";
        myUl += createUl(list[i].files); // call the same function with the list of files
      }
    }

    myUl += "</ul>";
    
    return myUl;
}

var ulList = createUl(directory);
document.querySelector("#ulContainer").innerHTML = ulList;

<div id="ulContainer">

</div>

CertainPerformance · Accepted Answer · 2018-03-31 03:17:25Z

Use recursion. It's much cleaner to create elements directly and assign to their textContent than to type out HTML markup (you don't know for sure whether an input's text is safe to insert as HTML or not, after all):

const input = [
    {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 outerUL = document.querySelector('ul');
appendObjToUL(input, outerUL);
function appendObjToUL(arr, ul) {
  arr.forEach(item => {
    ul.appendChild(document.createElement('li')).textContent = item.name;
    if (item.type === 'file') return;
    const dirLI = ul.appendChild(document.createElement('li'));
    const dirUL = dirLI.appendChild(document.createElement('ul'));
    appendObjToUL(item.files, dirUL);
  });
}

<ul></ul>

Kavindra · Accepted Answer · 2018-03-31 02:37:19Z

1

You can do it with 2 for loops(nested for loops). Implement the same kind of for loop if the directory[i] has a files array.

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

window.onload = function(){
    var ol = "<ol>";
    for(var i = 0; i < directory.length; i++){
        ol += "<li>" + directory[i].name;
        if(directory[i].files) {
          ol += "<ol>";
          for(var j = 0; j < directory[i].files.length; j++) {
            ol += "<li>" + directory[i].files[j].name + "</li>";
          }
          ol += "</ol>";
        }
        ol += "</li>";
    }
    ol += "</ol>";

    var myContainer = document.querySelector("#olContainer").innerHTML = ol;
};

<div id="olContainer"></div>

answered Mar 31, 2018 at 2:37

Kavindra

1,7072 gold badges15 silver badges19 bronze badges

2 Comments

Kavindra Over a year ago

Do you get any error in the console or are your variable names different?

mchd Over a year ago

I've already solved it man. Thanks anyways. I've accepted your answer and upvoted you. If you think that this was a well-asked question, could you also give me an upvote?

Collectives™ on Stack Overflow

Creating a UL from nested array

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related