Generating nested HTML list, based on string input. Vanilla JS

Question

I have an algorythmic problem with generating dynamically nested lists. On input i get an array of strings like that:

['A', 'A', '/B', '//C', '/B', '//C', 'A', 'A']

Each '/' is next level in hierarchy, and it is direct child of the last element with lesser amount of '/' signs. Elements with the same amount of '/' signs are on the same level.

Inputs like ['A', '//C'] or ['//C'] are invalid.

Result for that should be HTML lists in hierarchy A A -B --C -B --C A A

This is so far what i did: https://jsfiddle.net/k18Lbou7/

function createList(depth, elements, iterator, parentElement) {
      var newDepth = 0;
      for(var i=iterator; i<elements.length; i++) {
        var match = elements[i].text.match(/^\s*(\/+)/);
        if(match == null) {
            newDepth = 0;
        } else {
            newDepth = match[0].length;
        }
        if (depth == newDepth-1) {
          var nestedList = document.createElement('ul');
          parentElement.lastChild.appendChild(nestedList);
          createList(newDepth, elements, i, nestedList);
        } else if (depth == newDepth) {
          var nextElement = document.createElement('li');
          var span = document.createElement('span');
          span.innerHTML = elements[i].text;
          nextElement.appendChild(span);
          parentElement.appendChild(nextElement);
        }
      }
    }

var value = ['Home', '* This is active', '/This is dropdown', '// shhh...', '/ we ♥ you', '//Last one', 'Last one', 'Last one']
        .map(function(pLine) {
          return {
            'text': pLine,
            'page_id': null
          };
        });

var listElement = document.createElement('ul');

createList(0, value, 0, listElement);

document.body.appendChild(listElement);

The key is that I'm duplicating some keys, or avoiding the last elements in different approaches.

Maybe someone can help mi with spotting the reason of bad result or suggest different method for resolving this feature.

Big Thanks for help!

Marcin Goławski · Accepted Answer · 2016-02-10 08:45:19Z

Ok, i did id. This is an answer.

  function createList(elements, parentElement) {
  var parentsList = [parentElement];
  var depth = 0;
  elements.forEach(function(item) {
    var match = item.text.match(/^\s*(\/+)/);
    if(match) {
        depth = match[0].length;
    } else {
        depth = 0;
    }
    var listElement = document.createElement('li');
    var span = document.createElement('span');
    span.innerHTML = item.text
    listElement.appendChild(span);
    if (parentsList.length-1 == depth) {
        parentsList[parentsList.length-1].appendChild(listElement);
    } else if (parentsList.length-1 < depth) {
        var parentListElement = document.createElement('ul');
      parentListElement.appendChild(listElement);
      parentsList[parentsList.length-1].appendChild(parentListElement);
      parentsList.push(parentListElement);
    } else {
        while (parentsList.length-1 > depth) {
        parentsList.pop();
      }
      parentsList[parentsList.length-1].appendChild(listElement);
    }
  });     
}
var el = document.createElement('ul');

var value = ['Home', '* This is active', '/This is dropdown', '// shhh...', '/ we ♥ you', '//Last one', 'asd', '/Last one', 'Last one']
        .map(function(pLine) {
          return {
            'text': pLine,
            'page_id': null
          };
        });

createList(value, el);

document.body.appendChild(el);

Collectives™ on Stack Overflow

Generating nested HTML list, based on string input. Vanilla JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related